fix: task assignment button (#2528)

make assign button a button for keyboard users
stop page scrolling when up/down key in people-picker
remove background colors from mgt-tasks
fixes background color for file list

Author: gavinbarron

packages/mgt-components/src/components/mgt-file-list/mgt-file-list.scss

@@ -77,7 +77,7 @@ $progress-ring-size: var(--progress-ring-size, 24px);
         --file-padding: 10px 20px 10px 20px;
         --file-padding-inline-start: 24px;
         --file-border-radius: 2px;
-        --file-background-color: var(--file-item-background-color, var(--neutral-layer-1));
+        --file-background-color: var(--file-item-background-color, var(--neutral-layer-floating));
       }
     }
   }

packages/mgt-components/src/components/mgt-file-list/mgt-file-list.theme.scss

@@ -8,6 +8,6 @@
 @import '../../styles/shared-sass-variables';
 @import '../../components/mgt-file/mgt-file.theme';
 
-$file-list-background-color: var(--file-list-background-color, var(--neutral-layer-1));
-$show-more-button-background-color: var(--show-more-button-background-color, var(--neutral-layer-1));
+$file-list-background-color: var(--file-list-background-color, var(--neutral-layer-floating));
+$show-more-button-background-color: var(--show-more-button-background-color, var(--neutral-layer-floating));
 $show-more-button-background-color--hover: var(--show-more-button-background-color-hover, var(-neutral-fill-hover));

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

@@ -1549,9 +1549,7 @@ export class MgtPeoplePicker extends MgtTemplatedComponent {
 
     if (keyName === 'ArrowUp' || keyName === 'ArrowDown') {
       this.handleArrowSelection(event);
-      if (this.input.value?.length > 0) {
-        event.preventDefault();
-      }
+      event.preventDefault();
     }
 
     if (keyName === 'Enter') {

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

@@ -436,8 +436,9 @@ $task-new-dropdown-border-radius: var(--task-new-dropdown-border-radius, calc(va
 
   .people {
     [slot='no-data'] {
-      margin-top: 8px;
-      color: $task-new-person-icon-text-color;
+      fluent-button::part(control) {
+        color: $task-new-person-icon-text-color;
+      }
 
       svg {
         fill: $task-new-person-icon-color;

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

@@ -42,7 +42,7 @@ $task-incomplete-checkbox-hover-bg: var(
 );
 $task-complete-bg-color: var(--task-complete-background-color, transparent);
 $task-incomplete-bg-color: var(--task-incomplete-background-color, var(--neutral-layer-1));
-$tasks-background-color: var(--tasks-background-color, var(--neutral-layer-2));
+$tasks-background-color: var(--tasks-background-color, transparent);
 $input-bg: padding-box linear-gradient(var(--neutral-fill-input-rest), var(--neutral-fill-input-rest)),
   border-box var(--neutral-stroke-input-rest);
 $input-hover-bg: padding-box linear-gradient(var(--neutral-fill-input-hover), var(--neutral-fill-input-hover)),

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

@@ -1138,6 +1138,7 @@ export class MgtTasks extends MgtTemplatedComponent {
       } else {
         picker.selectedPeople = mgtPeople.people;
         flyout.open();
+        setTimeout(() => picker.focus(), 100);
       }
     }
   }
@@ -1211,7 +1212,7 @@ export class MgtTasks extends MgtTemplatedComponent {
             </div>
           `;
 
-      const taskPeople = this.dataSource !== TasksSource.todo ? this.renderAssignedPeople(task) : null;
+      const taskPeople = this.dataSource === TasksSource.todo ? null : this.renderAssignedPeople(task);
 
       taskDetails = html`${group} ${folder} ${taskPeople} ${taskDue}`;
     }
@@ -1300,9 +1301,10 @@ export class MgtTasks extends MgtTemplatedComponent {
   };
 
   private readonly handlePeopleKeydown = (e: KeyboardEvent, task: ITask) => {
-    if (e.key === 'Enter') {
+    if (e.key === 'Enter' || e.key === ' ') {
       this.togglePeoplePicker(task);
       e.stopPropagation();
+      e.preventDefault();
     }
   };
 
@@ -1340,34 +1342,37 @@ export class MgtTasks extends MgtTemplatedComponent {
       <mgt-people
         class="people people-${taskId}"
         .userIds=${assignedPeople}
-        person-card=${PersonCardInteraction.none}
+        .personCardInteraction=${PersonCardInteraction.none}
         @click=${(e: MouseEvent) => this.handlePeopleClick(e, task)}
-        @keydown=${(e: KeyboardEvent) => this.handlePeopleKeydown(e, task)}>
-          <template data-type="no-data">
+        @keydown=${(e: KeyboardEvent) => this.handlePeopleKeydown(e, task)}
+      >
+        <template data-type="no-data">
+          <fluent-button>
             <span style="display:flex;place-content:start;gap:4px;padding-inline-start:4px">
               <svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" class="svg" fill="currentColor">
                 <path d="M9 2a4 4 0 100 8 4 4 0 000-8zM6 6a3 3 0 116 0 3 3 0 01-6 0z"></path>
                 <path d="M4 11a2 2 0 00-2 2c0 1.7.83 2.97 2.13 3.8A9.14 9.14 0 009 18c.41 0 .82-.02 1.21-.06A5.5 5.5 0 019.6 17 12 12 0 019 17a8.16 8.16 0 01-4.33-1.05A3.36 3.36 0 013 13a1 1 0 011-1h5.6c.18-.36.4-.7.66-1H4z"></path>
                 <path d="M14.5 19a4.5 4.5 0 100-9 4.5 4.5 0 000 9zm0-7c.28 0 .5.22.5.5V14h1.5a.5.5 0 010 1H15v1.5a.5.5 0 01-1 0V15h-1.5a.5.5 0 010-1H14v-1.5c0-.28.22-.5.5-.5z"></path>
               </svg> Assign</span>
-          </template>
+            </fluent-button>
+        </template>
       </mgt-people>`;
 
     const picker = mgtHtml`
       <mgt-people-picker
         class="people-picker picker-${taskId}"
         .groupId=${ifDefined(planGroupId)}
         @keydown=${this.handlePeoplePickerKeydown}>
-        .groupId=${ifDefined(planGroupId)}
-        ></mgt-people-picker>`;
+      ></mgt-people-picker>`;
 
     return mgtHtml`
       <mgt-flyout
         light-dismiss
         class=${classMap(taskAssigneeClasses)}
-        @closed=${() => this.updateAssignedPeople(task)}>
-          <div slot="anchor">${assignedPeopleTemplate}</div>
-          <div slot="flyout" part="picker" class="picker">${picker}</div>
+        @closed=${() => this.updateAssignedPeople(task)}
+      >
+        <div slot="anchor">${assignedPeopleTemplate}</div>
+        <div slot="flyout" part="picker" class="picker">${picker}</div>
       </mgt-flyout>
     `;
   }

packages/mgt-components/src/components/sub-components/mgt-arrow-options/mgt-arrow-options.scss

@@ -9,7 +9,7 @@
 @import '../../../styles/shared-sass-variables';
 
 $arrow-options-left: var(--arrow-options-left, 0);
-$arrow-options-btn-bg-color: var(--arrow-options-button-background-color, var(--neutral-layer-2));
+$arrow-options-btn-bg-color: var(--arrow-options-button-background-color, transparent);
 $arrow-options-btn-font-size: var(--arrow-options-button-font-size, large);
 $arrow-options-btn-font-weight: var(--arrow-options-button-font-weight, 600);
 $arrow-options-btn-font-color: var(--arrow-options-button-font-color, var(--accent-base-color));
@@ -19,12 +19,12 @@ $arrow-options-btn-font-color: var(--arrow-options-button-font-color, var(--acce
   font-family: $font-family;
 
   .header {
-    &::part(control){
+    &::part(control) {
       font-size: $arrow-options-btn-font-size;
       font-weight: $arrow-options-btn-font-weight;
       color: $arrow-options-btn-font-color;
       background: $arrow-options-btn-bg-color;
-      
+
       &:hover {
         background: var(--neutral-fill-stealth-hover);
       }
@@ -36,16 +36,15 @@ $arrow-options-btn-font-color: var(--arrow-options-button-font-color, var(--acce
     }
   }
 
-  .menu{
+  .menu {
     position: absolute;
     left: $arrow-options-left;
     z-index: 1;
     display: none;
-    
-    &.open{
+
+    &.open {
       display: block;
       width: max-content;
     }
   }
-
 }