Skip to content

Commit 1ce13ae

Browse files
musalegavinbarron
musale
and
gavinbarron
authored
fix: set the teams-channel-picker dropdown to overlay all other elements (#2337)
Set the fluentcard to be on top of all other element when displayed Adapt the input control to customization tokens Adapt the dropdown and selected item controls to customization tokens Remove comments and unused codeblocks Make dropdown item cover the entire card width --------- Signed-off-by: Martin Musale <[email protected]> Co-authored-by: Gavin Barron <[email protected]>
1 parent abd00b4 commit 1ce13ae

File tree

4 files changed

+143
-39
lines changed

4 files changed

+143
-39
lines changed

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

Lines changed: 89 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -16,12 +16,14 @@
1616
.container {
1717
display: flex;
1818
flex-direction: column;
19+
position: relative;
1920
}
2021

2122
.dropdown {
22-
z-index: 1;
2323
display: none;
24-
margin-top: 4px;
24+
position: absolute;
25+
z-index: 1000;
26+
top: 34px;
2527

2628
&.visible {
2729
display: flex;
@@ -61,26 +63,85 @@
6163
padding: 5px;
6264

6365
.loading-text {
64-
color: var(--color, #0078d4);
6566
margin: auto;
6667
}
6768
}
6869
}
6970

7071
:host {
7172
fluent-card {
72-
--fill-color: var(--dropdown-background-color, --fill-color);
73+
background: $dropdown-background-color;
74+
7375
--card-height: auto;
7476
--width: var(--card-width);
7577
}
7678

7779
fluent-text-field {
7880
width: 100%;
7981

80-
--fill-color: var(--color, $color);
81-
--neutral-fill-input-rest: var(--input-background-color, #fff);
82-
--input-placeholder-rest: var(--placeholder-color, --input-placeholder-rest);
83-
--input-placeholder-hover: var(--placeholder-color-focus, --input-placeholder-hover);
82+
&::part(root){
83+
background: $input-background;
84+
85+
&:hover {
86+
background: $input-hover-background;
87+
}
88+
89+
&:focus,
90+
&:focus-within {
91+
background: $input-focus-background;
92+
}
93+
}
94+
95+
&::part(control) {
96+
&::placeholder {
97+
color: $placeholder-text-color;
98+
}
99+
100+
&:hover {
101+
&::placeholder {
102+
color: $placeholder-hover-text-color;
103+
}
104+
}
105+
106+
&:focus,
107+
&:focus-within {
108+
&::placeholder {
109+
color: $placeholder-focus-text-color;
110+
}
111+
}
112+
}
113+
114+
.search-icon {
115+
svg {
116+
path {
117+
fill: var(--channel-picker-search-icon-color, currentColor);
118+
}
119+
}
120+
}
121+
122+
.down-chevron {
123+
svg {
124+
path {
125+
fill: var(--channel-picker-down-chevron-color, currentColor);
126+
}
127+
}
128+
}
129+
130+
.up-chevron {
131+
svg {
132+
path {
133+
fill: var(--channel-picker-up-chevron-color, currentColor);
134+
}
135+
}
136+
}
137+
138+
.close-icon {
139+
svg {
140+
path {
141+
fill: var(--channel-picker-close-icon-color, currentColor);
142+
}
143+
}
144+
}
84145
}
85146

86147
fluent-tree-view {
@@ -90,14 +151,29 @@
90151
}
91152

92153
fluent-tree-item {
154+
width: 100%;
155+
93156
--tree-item-nested-width: 2em;
94-
--neutral-foreground-rest: var(--color, $color);
95-
--neutral-fill-stealth-hover: var(--dropdown-item-hover-background, --neutral-fill-stealth-hover);
96-
--neutral-fill-secondary-rest: var(--dropdown-item-selected-background, --neutral-fill-secondary-rest);
97-
--neutral-fill-stealth-rest: var(--dropdown-background-color, --neutral-fill-stealth-rest);
157+
158+
&::part(content-region),
159+
&::part(positioning-region),
160+
&::part(expand-collapse-button) {
161+
color: $dropdown-item-text-color;
162+
background: $dropdown-background-color;
163+
164+
&:hover {
165+
background: $dropdown-item-background-color-hover;
166+
167+
&::part(expand-collapse-button) {
168+
background: $dropdown-item-background-color-hover;
169+
}
170+
}
171+
}
98172
}
99173

100174
fluent-breadcrumb-item {
175+
color: $dropdown-item-selected-text-color;
176+
101177
.team-parent-name {
102178
font-weight: bold;
103179
}
@@ -113,7 +189,7 @@
113189
margin-right: 8px;
114190

115191
svg {
116-
stroke: var(--arrow-fill, $color);
192+
stroke: var(--channel-picker-arrow-fill, var(--neutral-foreground-rest));
117193
}
118194
}
119195
}

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

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,3 +6,23 @@
66
*/
77

88
@import '../../styles/shared-sass-variables';
9+
10+
$input-background: padding-box linear-gradient(
11+
var(--channel-picker-input-background-color, var(--neutral-fill-input-rest)),
12+
var(--channel-picker-input-background-color, var(--neutral-fill-input-rest))),
13+
border-box var(--channel-picker-input-border-color, var(--neutral-stroke-input-rest));
14+
$input-hover-background: padding-box linear-gradient(
15+
var(--channel-picker-input-background-color-hover, var(--neutral-fill-input-hover)),
16+
var(--channel-picker-input-background-color-hover, var(--neutral-fill-input-hover))),
17+
border-box var(--channel-picker-input-hover-border-color, var(--neutral-stroke-input-hover));
18+
$input-focus-background: padding-box linear-gradient(
19+
var(--channel-picker-input-background-color-focus, var(--neutral-fill-input-focus)),
20+
var(--channel-picker-input-background-color-focus, var(--neutral-fill-input-focus))),
21+
border-box var(--channel-picker-input-focus-border-color, var(--neutral-stroke-input-focus));
22+
$placeholder-text-color: var(--channel-picker-input-placeholder-text-color, var(--input-placeholder-rest));
23+
$placeholder-hover-text-color: var(--channel-picker-input-placeholder-text-color-hover, var(--input-placeholder-hover));
24+
$placeholder-focus-text-color: var(--channel-picker-input-placeholder-text-color-focus, var(--input-placeholder-filled));
25+
$dropdown-background-color: var(--channel-picker-dropdown-background-color, var(--fill-color));
26+
$dropdown-item-text-color: var(--channel-picker-dropdown-item-text-color, currentColor);
27+
$dropdown-item-background-color-hover: var(--channel-picker-dropdown-item-background-color-hover, var(--neutral-fill-stealth-hover));
28+
$dropdown-item-selected-text-color: var(--channel-picker-dropdown-item-text-color-selected, var(--neutral-foreground-rest));

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

Lines changed: 20 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -169,23 +169,30 @@ export interface MgtTeamsChannelPickerConfig {
169169
*
170170
* @cssprop --color - {font} Default font color
171171
*
172-
* @cssprop --input-border - {String} Input section entire border
173-
* @cssprop --input-border-top - {String} Input section border top only
174-
* @cssprop --input-border-right - {String} Input section border right only
175-
* @cssprop --input-border-bottom - {String} Input section border bottom only
176-
* @cssprop --input-border-left - {String} Input section border left only
177-
* @cssprop --input-background-color - {Color} Input section background color
178-
* @cssprop --input-border-color--hover - {Color} Input border hover color
179-
* @cssprop --input-border-color--focus - {Color} Input border focus color
172+
* @cssprop --channel-picker-input-border - {String} Input section entire border
173+
* @cssprop --channel-picker-input-border-top - {String} Input section border top only
174+
* @cssprop --channel-picker-input-border-right - {String} Input section border right only
175+
* @cssprop --channel-picker-input-border-bottom - {String} Input section border bottom only
176+
* @cssprop --channel-picker-input-border-left - {String} Input section border left only
177+
* @cssprop --channel-picker-input-border-color - {Color} Input border color
178+
* @cssprop --channel-picker-input-background-color - {Color} Input section background color
179+
* @cssprop --channel-picker-input-background-color-hover - {Color} Input background hover color
180+
* @cssprop --channel-picker-input-background-color-focus - {Color} Input background focus color
180181
*
181-
* @cssprop --dropdown-background-color - {Color} Background color of dropdown area
182-
* @cssprop --dropdown-item-hover-background - {Color} Background color of channel or team during hover
183-
* @cssprop --dropdown-item-selected-background - {Color} Background color of selected channel
182+
* @cssprop --channel-picker-dropdown-background-color - {Color} Background color of dropdown area
183+
* @cssprop --channel-picker-dropdown-item-text-color - {Color} Text color of the dropdown text.
184+
* @cssprop --channel-picker-dropdown-item-background-color-hover - {Color} Background color of channel or team during hover
185+
* @cssprop --channel-picker-dropdown-item-text-color-selected - {Color} Text color of channel or team during after selection
184186
*
185-
* @cssprop --arrow-fill - {Color} Color of arrow svg
187+
* @cssprop --channel-picker-arrow-fill - {Color} Color of arrow svg
186188
* @cssprop --placeholder-color-focus - {Color} Color of placeholder text during focus state
187189
* @cssprop --placeholder-color - {Color} Color of placeholder text
188190
*
191+
* @cssprop --channel-picker-search-icon-color - {Color} the search icon color.
192+
* @cssprop --channel-picker-down-chevron-color - {Color} the down chevron icon color.
193+
* @cssprop --channel-picker-up-chevron-color - {Color} the up chevron icon color.
194+
* @cssprop --channel-picker-close-icon-color - {Color} the close icon color.
195+
*
189196
*/
190197
@customElement('teams-channel-picker')
191198
export class MgtTeamsChannelPicker extends MgtTemplatedComponent {
@@ -590,7 +597,7 @@ export class MgtTeamsChannelPicker extends MgtTemplatedComponent {
590597
alt="${obj.item.displayName}"
591598
src=${
592599
// eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
593-
this.teamsPhotos[obj.item.id].photo
600+
this.teamsPhotos[obj.item.id]?.photo
594601
} />`;
595602
}
596603
return html`

‎stories/components/teamsChannelPicker/teamsChannelPicker.style.js‎

Lines changed: 14 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -21,24 +21,25 @@ export const customCSSProperties = () => html`
2121
.teams-channel-picker {
2222
--channel-picker-input-border: 2px rgba(255, 255, 255, 0.5) solid; /* sets all input area border */
2323
24-
/* OR individual input border sides */
25-
--channel-picker-input-border-bottom: 2px rgba(255, 255, 255, 0.5) solid;
26-
--channel-picker-input-border-right: 2px rgba(255, 255, 255, 0.5) solid;
27-
--channel-picker-input-border-left: 2px rgba(255, 255, 255, 0.5) solid;
28-
--channel-picker-input-border-top: 2px rgba(255, 255, 255, 0.5) solid;
29-
3024
--channel-picker-input-background-color: #1f1f1f; /* input area background color */
31-
--channel-picker-input-border-color-hover: #008394; /* input area border hover color */
32-
--channel-picker-input-border-color-focus: #0f78d4; /* input area border focus color */
25+
--channel-picker-input-background-color-hover: #008394; /* input area border hover color */
26+
--channel-picker-input-background-color-focus: #0f78d4; /* input area border focus color */
3327
34-
--channel-picker-dropdown-background-color: #1f1f1f; /* channel background color */
35-
--channel-picker-dropdown-item-hover-background: #333d47; /* channel or team hover background */
36-
--channel-picker-dropdown-item-selected-background: #0F78D4; /* selected channel background color */
28+
--channel-picker-dropdown-background-color: brown; /* channel background color */
29+
--channel-picker-dropdown-item-text-color: #fff;
30+
--channel-picker-dropdown-item-background-color-hover: #333d47; /* channel or team hover background */
31+
--channel-picker-dropdown-item-text-color-selected: #0F78D4; /* selected channel background color */
3732
3833
--channel-picker-color: white; /* input area border focus color */
3934
--channel-picker-arrow-fill: #ffffff;
40-
--channel-picker-placeholder-color: #f1f1f1; /* placeholder text color */
41-
--channel-picker-placeholder-color-focus: rgba(255, 255, 255, 0.8); /* place holder text focus color */
35+
--channel-picker-input-placeholder-text-color: #f1f1f1; /* placeholder text color */
36+
--channel-picker-input-placeholder-text-color-hover: rgba(255, 255, 255, 0.8); /* place holder text focus color */
37+
--channel-picker-input-placeholder-text-color-focus: rgba(255, 255, 255, 0.8); /* place holder text focus color */
38+
39+
--channel-picker-search-icon-color: yellow;
40+
--channel-picker-close-icon-color: yellow;
41+
--channel-picker-down-chevron-color: yellow;
42+
--channel-picker-up-chevron-color: yellow;
4243
}
4344
</style>
4445
<mgt-teams-channel-picker class="teams-channel-picker" person-query="me"></mgt-teams-channel-picker>

0 commit comments

Comments
 (0)