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 <gavinbarron@microsoft.com>
Co-authored-by: Musale Martin <martinmusale@microsoft.com>
Co-authored-by: Musale Martin <martinmshale@gmail.com>
Co-authored-by: Sébastien Levert <sebastienlevert@users.noreply.github.com>

packages/mgt-components/package.json

@@ -40,7 +40,7 @@
     "@microsoft/microsoft-graph-client": "^3.0.0",
     "@microsoft/microsoft-graph-types": "^2.0.0",
     "@microsoft/microsoft-graph-types-beta": "^0.16.0-preview",
-    "@fluentui/web-components": "^2.5.3",
+    "@fluentui/web-components": "^2.5.12",
     "office-ui-fabric-core": "^11.0.0"
   },
   "publishConfig": {

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

@@ -0,0 +1,25 @@
+/**
+ * -------------------------------------------------------------------------------------------
+ * Copyright (c) Microsoft Corporation.  All Rights Reserved.  Licensed under the MIT License.
+ * See License in the project root for license information.
+ * -------------------------------------------------------------------------------------------
+ */
+
+@import '../../../../../node_modules/office-ui-fabric-core/dist/sass/References';
+@import '../../styles/shared-styles.scss';
+@import './mgt-picker.theme.scss';
+
+:host {
+  font-family: $font-family;
+}
+
+:host .picker,
+mgt-picker .picker {
+  background-color: $picker-background-color;
+}
+
+[dir='rtl'] {
+  .picker {
+    direction: rtl;
+  }
+}

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

@@ -0,0 +1,10 @@
+/**
+ * -------------------------------------------------------------------------------------------
+ * Copyright (c) Microsoft Corporation.  All Rights Reserved.  Licensed under the MIT License.
+ * See License in the project root for license information.
+ * -------------------------------------------------------------------------------------------
+ */
+
+@import '../../styles/shared-sass-variables.scss';
+
+$picker-background-color: var(--picker-background-color, transparent);

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

@@ -24,6 +24,8 @@ registerFluentComponents(fluentCombobox, fluentOption);
  * @export
  * @class MgtPicker
  * @extends {MgtTemplatedComponent}
+ *
+ * @cssprop --picker-background-color - {Color} Picker component background color
  */
 // @customElement('mgt-picker')
 @customElement('picker')
@@ -211,7 +213,7 @@ export class MgtPicker extends MgtTemplatedComponent {
    */
   protected renderPicker(): TemplateResult {
     return mgtHtml`
-      <fluent-combobox id="combobox" autocomplete="list" placeholder=${this.placeholder}>
+      <fluent-combobox part="picker" class="picker" id="combobox" autocomplete="list" placeholder=${this.placeholder}>
         ${this.response.map(
           item => html`
           <fluent-option value=${item.id} @click=${(e: MouseEvent) => this.handleClick(e, item)}> ${
@@ -266,6 +268,6 @@ export class MgtPicker extends MgtTemplatedComponent {
   }
 
   private handleClick(e: MouseEvent, item: any) {
-    this.fireCustomEvent('selectionChanged', item);
+    this.fireCustomEvent('selectionChanged', item, true, false, true);
   }
 }

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

@@ -22,8 +22,6 @@ $task-border-completed: var(--task-complete-border, 2px dotted inherit);
   font-family: $font-family;
   display: flex;
   flex-direction: column;
-  background-color: set-var(background-color__sub1, $theme-default, $common);
-  padding: var(--tasks-padding, 12px);
   color: $color;
 
   input[type='date']::-webkit-inner-spin-button,
@@ -153,9 +151,9 @@ $task-border-completed: var(--task-complete-border, 2px dotted inherit);
 
   .Task {
     position: relative;
-    margin: var(--task-margin, 0 0 18px 0);
+    margin: var(--task-margin, 0 0 0 0);
     padding: var(--task-padding, 0 0 0 0);
-    background-color: $background-color;
+    background-color: $task-background-color;
     border: set-var(border, $theme-default, $tasks);
     border-radius: 8px;
 
@@ -464,7 +462,7 @@ $task-border-completed: var(--task-complete-border, 2px dotted inherit);
     }
 
     &.Complete {
-      background: $background-color--completed;
+      background: $task-background-color--completed;
       border: set-var(border--completed, $theme-default, $tasks);
 
       .TaskContent .TaskDetailsContainer .TaskTitle {
@@ -640,43 +638,6 @@ $task-border-completed: var(--task-complete-border, 2px dotted inherit);
         }
       }
     }
-
-    &.LoadingTask {
-      .TaskCheckContainer {
-        cursor: default;
-      }
-      .TaskDetails {
-        display: flex;
-      }
-      .TaskCheck {
-        background: #f2f2f2;
-        border-color: #f2f2f2;
-        cursor: default;
-      }
-      .TaskDetailIcon {
-        width: 16px;
-        height: 16px;
-        margin: 5px;
-        background: #f2f2f2;
-      }
-      .TaskTitle {
-        background: #f2f2f2;
-        max-width: 400px;
-        height: 20px;
-        margin-right: 20px !important;
-      }
-      .TaskDetail {
-        margin-right: 12px;
-        display: flex;
-        flex-direction: row;
-        align-items: center;
-      }
-      .TaskDetailName {
-        width: 81px;
-        height: 10px;
-        background: #f2f2f2;
-      }
-    }
   }
 }
 

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

@@ -7,11 +7,19 @@
 
 @import '../../styles/shared-sass-variables.scss';
 
-$background-color: var(--tasks-background-color, set-var(background-color, $theme-default, $common));
-$background-color--completed: var(--task-complete-background, set-var(background-color__sub1, $theme-default, $common));
 $title__color: var(--task-title-color, set-var(title__color__subtitle, $theme-default, $common));
 $button__color--cancel: var(--task-new-cancel-button-color, set-var(color__sub1, $theme-default, $common));
 $detail__color: var(--task-detail-color, set-var(color__sub2, $theme-default, $common));
+$task-color: #{var(--task-color, var(--neutral-foreground-rest))};
+$task-background-color: #{var(--task-background-color, var(--neutral-layer-floating))};
+$task-background-color--completed: #{var(--task-complete-background, var(--neutral-layer-1))};
+$task-date-input-active-color: #{var(--task-date-input-active-color, var(--accent-fill-rest))};
+$task-date-input-hover-color: #{var(--task-date-input-hover-color, var(--neutral-layer-1))};
+$task-background-color-hover: #{var(--task-background-color-hover, var(--neutral-fill-hover))};
+$task-box-shadow: #{var(--task-box-shadow, var(--elevation-shadow-card-active))};
+$task-border: #{var(--task-border, var(--neutral-stroke-input-active))};
+$task-border-completed: #{var(--task-border-completed, var(--neutral-stroke-input-active))};
+$task-radio-background-color: #{var(--task-radio-background-color, var(--accent-fill-rest))};
 
 $tasks: (
   border: (