[Tasks] Adding additional CSS custom properties (#271)

* added more custom properties for tasks

* fixed icon rotating

* Adding task-icon-alignment to mgt-tasks

* Update custom elements to enable storybook to detect new css properties

Co-authored-by: Shane Weaver <[email protected]>
Co-authored-by: Beth Pan <[email protected]>

Author: 3 people

custom-elements.json

@@ -1135,6 +1135,51 @@
           "name": "--task-complete-detail-icon-color",
           "description": "Task complete detail icon color",
           "type": "Color"
+        },
+        {
+          "name": "--tasks-background-color",
+          "description": "Task background color",
+          "type": "Color"
+        },
+        {
+          "name": "--task-icon-alignment",
+          "description": "Task icon alignment",
+          "type": "String"
+        },
+        {
+          "name": "--task-icon-background",
+          "description": "Task icon color",
+          "type": "Color"
+        },
+        {
+          "name": "--task-icon-background-completed",
+          "description": "Task icon background color when completed",
+          "type": "Color"
+        },
+        {
+          "name": "--task-icon-border",
+          "description": "Task icon border styles",
+          "type": "String"
+        },
+        {
+          "name": "--task-icon-border-completed",
+          "description": "Task icon border style when task is completed",
+          "type": "String"
+        },
+        {
+          "name": "--task-icon-border-radius",
+          "description": "Task icon border radius",
+          "type": "String"
+        },
+        {
+          "name": "--task-icon-color",
+          "description": "Task icon color",
+          "type": "Color"
+        },
+        {
+          "name": "--task-icon-color-completed",
+          "description": "Task icon color when completed",
+          "type": "Color"
         }
       ]
     },

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

@@ -8,12 +8,23 @@
 @import '../../styles/shared-styles.scss';
 @import '../../../node_modules/office-ui-fabric-core/dist/sass/References';
 
+$tasks-background-color: var(--tasks-background-color, #f8f8f8);
+
+$task-icon-alignment: var(--task-icon-alignment, flex-start);
+$task-icon-background: var(--task-icon-background, transparent);
+$task-icon-background-completed: var(--task-icon-background-completed, $ms-color-sharedGreenCyan10);
+$task-icon-border: var(--task-icon-border, solid 1px $ms-color-gray120);
+$task-icon-border-completed: var(--task-icon-border-completed, solid 1px white);
+$task-icon-border-radius: var(--task-icon-border-radius, 50%);
+$task-icon-color: var(--task-icon-color, black);
+$task-icon-color-completed: var(--task-icon-color-completed, white);
+
 mgt-tasks,
 :host {
   font-family: var(--default-font-family, 'Segoe UI');
   display: flex;
   flex-direction: column;
-  background-color: var(--tasks-background-color, #f8f8f8);
+  background-color: $tasks-background-color;
   padding: var(--tasks-padding, 12px);
 }
 
@@ -579,16 +590,17 @@ mgt-tasks,
       color: white;
       cursor: pointer;
       display: flex;
-      align-items: flex-start;
+      align-items: $task-icon-alignment;
       margin: 21px 10px 20px 20px;
 
       user-select: none;
       -moz-user-select: none;
       -ms-user-select: none;
       &.Complete {
         .TaskCheck {
-          background-color: $ms-color-sharedGreenCyan10;
-          border: solid 1px white;
+          background-color: $task-icon-background-completed;
+          border: $task-icon-border-completed;
+          color: $task-icon-color-completed;
         }
       }
     }
@@ -599,18 +611,18 @@ mgt-tasks,
       display: inline-block;
       width: 18px;
       height: 18px;
-      border-radius: 50%;
-      border: solid 1px $ms-color-gray120;
-      color: white;
+      border-radius: $task-icon-border-radius;
+      border: $task-icon-border;
+      color: $task-icon-color;
       display: flex;
       justify-content: center;
       align-items: center;
+      background-color: $task-icon-background;
 
       user-select: none;
       -moz-user-select: none;
       -ms-user-select: none;
-      &.Loading {
-        color: black;
+      &.Loading .TaskCheckContent {
         animation: rotateIcon 2s infinite linear;
       }
     }

src/components/mgt-tasks/mgt-tasks.ts

@@ -969,7 +969,7 @@ export class MgtTasks extends MgtTemplatedComponent {
       : null;
 
     const taskCheck = html`
-      <span class=${classMap(taskCheckClasses)}>${taskCheckContent}</span>
+      <span class=${classMap(taskCheckClasses)}><span class="TaskCheckContent">${taskCheckContent}</span></span>
     `;
 
     const groupTitle = this._currentGroup ? null : this.getPlanTitle(task.topParentId);