Skip to content

Commit c7bf047

Browse files
Mnickiigavinbarronmusalesebastienlevert
authored
feat: update Todo component to new Fluent designs (#1967)
implement generic picker for current list picking bubble up selectionChanged event move todo functions, add selected date functionality update todo theming and style fixes include rest/active task input behavior change svg default color to currentColor use strings variable for fluent-text-field aria-label changes to make new task and tasks list use 100% of width provided improved rendering of tasks with long names on mobile widths removed obsolete background and padding css properties fix checkmark issues update shimmers to new design use fluent-text-field for calendar date input~ remove calendar icon in new task add part attribute to picker fluent-combobox remove anonymous functions, fix build add task margins and shadows use hidden svgs for task checking add new css tokens, remove commented code rewrite handleSelectionChanged as a synchronous method use fluent-checkbox to fix checking issues --------- Co-authored-by: Gavin Barron <[email protected]> Co-authored-by: Musale Martin <[email protected]> Co-authored-by: Musale Martin <[email protected]> Co-authored-by: Sébastien Levert <[email protected]>
1 parent fc4f1e0 commit c7bf047

File tree

14 files changed

+577
-547
lines changed

14 files changed

+577
-547
lines changed

‎packages/mgt-components/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,7 @@
4040
"@microsoft/microsoft-graph-client": "^3.0.0",
4141
"@microsoft/microsoft-graph-types": "^2.0.0",
4242
"@microsoft/microsoft-graph-types-beta": "^0.16.0-preview",
43-
"@fluentui/web-components": "^2.5.3",
43+
"@fluentui/web-components": "^2.5.12",
4444
"office-ui-fabric-core": "^11.0.0"
4545
},
4646
"publishConfig": {

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

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
/**
2+
* -------------------------------------------------------------------------------------------
3+
* Copyright (c) Microsoft Corporation. All Rights Reserved. Licensed under the MIT License.
4+
* See License in the project root for license information.
5+
* -------------------------------------------------------------------------------------------
6+
*/
7+
8+
@import '../../../../../node_modules/office-ui-fabric-core/dist/sass/References';
9+
@import '../../styles/shared-styles.scss';
10+
@import './mgt-picker.theme.scss';
11+
12+
:host {
13+
font-family: $font-family;
14+
}
15+
16+
:host .picker,
17+
mgt-picker .picker {
18+
background-color: $picker-background-color;
19+
}
20+
21+
[dir='rtl'] {
22+
.picker {
23+
direction: rtl;
24+
}
25+
}

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

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
/**
2+
* -------------------------------------------------------------------------------------------
3+
* Copyright (c) Microsoft Corporation. All Rights Reserved. Licensed under the MIT License.
4+
* See License in the project root for license information.
5+
* -------------------------------------------------------------------------------------------
6+
*/
7+
8+
@import '../../styles/shared-sass-variables.scss';
9+
10+
$picker-background-color: var(--picker-background-color, transparent);

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

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,8 @@ registerFluentComponents(fluentCombobox, fluentOption);
2424
* @export
2525
* @class MgtPicker
2626
* @extends {MgtTemplatedComponent}
27+
*
28+
* @cssprop --picker-background-color - {Color} Picker component background color
2729
*/
2830
// @customElement('mgt-picker')
2931
@customElement('picker')
@@ -211,7 +213,7 @@ export class MgtPicker extends MgtTemplatedComponent {
211213
*/
212214
protected renderPicker(): TemplateResult {
213215
return mgtHtml`
214-
<fluent-combobox id="combobox" autocomplete="list" placeholder=${this.placeholder}>
216+
<fluent-combobox part="picker" class="picker" id="combobox" autocomplete="list" placeholder=${this.placeholder}>
215217
${this.response.map(
216218
item => html`
217219
<fluent-option value=${item.id} @click=${(e: MouseEvent) => this.handleClick(e, item)}> ${
@@ -266,6 +268,6 @@ export class MgtPicker extends MgtTemplatedComponent {
266268
}
267269

268270
private handleClick(e: MouseEvent, item: any) {
269-
this.fireCustomEvent('selectionChanged', item);
271+
this.fireCustomEvent('selectionChanged', item, true, false, true);
270272
}
271273
}

‎packages/mgt-components/src/components/mgt-tasks-base/mgt-tasks-base.scss‎

Lines changed: 3 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -22,8 +22,6 @@ $task-border-completed: var(--task-complete-border, 2px dotted inherit);
2222
font-family: $font-family;
2323
display: flex;
2424
flex-direction: column;
25-
background-color: set-var(background-color__sub1, $theme-default, $common);
26-
padding: var(--tasks-padding, 12px);
2725
color: $color;
2826

2927
input[type='date']::-webkit-inner-spin-button,
@@ -153,9 +151,9 @@ $task-border-completed: var(--task-complete-border, 2px dotted inherit);
153151

154152
.Task {
155153
position: relative;
156-
margin: var(--task-margin, 0 0 18px 0);
154+
margin: var(--task-margin, 0 0 0 0);
157155
padding: var(--task-padding, 0 0 0 0);
158-
background-color: $background-color;
156+
background-color: $task-background-color;
159157
border: set-var(border, $theme-default, $tasks);
160158
border-radius: 8px;
161159

@@ -464,7 +462,7 @@ $task-border-completed: var(--task-complete-border, 2px dotted inherit);
464462
}
465463

466464
&.Complete {
467-
background: $background-color--completed;
465+
background: $task-background-color--completed;
468466
border: set-var(border--completed, $theme-default, $tasks);
469467

470468
.TaskContent .TaskDetailsContainer .TaskTitle {
@@ -640,43 +638,6 @@ $task-border-completed: var(--task-complete-border, 2px dotted inherit);
640638
}
641639
}
642640
}
643-
644-
&.LoadingTask {
645-
.TaskCheckContainer {
646-
cursor: default;
647-
}
648-
.TaskDetails {
649-
display: flex;
650-
}
651-
.TaskCheck {
652-
background: #f2f2f2;
653-
border-color: #f2f2f2;
654-
cursor: default;
655-
}
656-
.TaskDetailIcon {
657-
width: 16px;
658-
height: 16px;
659-
margin: 5px;
660-
background: #f2f2f2;
661-
}
662-
.TaskTitle {
663-
background: #f2f2f2;
664-
max-width: 400px;
665-
height: 20px;
666-
margin-right: 20px !important;
667-
}
668-
.TaskDetail {
669-
margin-right: 12px;
670-
display: flex;
671-
flex-direction: row;
672-
align-items: center;
673-
}
674-
.TaskDetailName {
675-
width: 81px;
676-
height: 10px;
677-
background: #f2f2f2;
678-
}
679-
}
680641
}
681642
}
682643

‎packages/mgt-components/src/components/mgt-tasks-base/mgt-tasks-base.theme.scss‎

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,11 +7,19 @@
77

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

10-
$background-color: var(--tasks-background-color, set-var(background-color, $theme-default, $common));
11-
$background-color--completed: var(--task-complete-background, set-var(background-color__sub1, $theme-default, $common));
1210
$title__color: var(--task-title-color, set-var(title__color__subtitle, $theme-default, $common));
1311
$button__color--cancel: var(--task-new-cancel-button-color, set-var(color__sub1, $theme-default, $common));
1412
$detail__color: var(--task-detail-color, set-var(color__sub2, $theme-default, $common));
13+
$task-color: #{var(--task-color, var(--neutral-foreground-rest))};
14+
$task-background-color: #{var(--task-background-color, var(--neutral-layer-floating))};
15+
$task-background-color--completed: #{var(--task-complete-background, var(--neutral-layer-1))};
16+
$task-date-input-active-color: #{var(--task-date-input-active-color, var(--accent-fill-rest))};
17+
$task-date-input-hover-color: #{var(--task-date-input-hover-color, var(--neutral-layer-1))};
18+
$task-background-color-hover: #{var(--task-background-color-hover, var(--neutral-fill-hover))};
19+
$task-box-shadow: #{var(--task-box-shadow, var(--elevation-shadow-card-active))};
20+
$task-border: #{var(--task-border, var(--neutral-stroke-input-active))};
21+
$task-border-completed: #{var(--task-border-completed, var(--neutral-stroke-input-active))};
22+
$task-radio-background-color: #{var(--task-radio-background-color, var(--accent-fill-rest))};
1523

1624
$tasks: (
1725
border: (

0 commit comments

Comments
 (0)