all: migrate checkbox to mdc spec (connects #9166)

src/app/chat/chat-sidebar/chat-sidebar.component.html

@@ -19,8 +19,9 @@
       </button><br>
       <div class="full-conversation-row">
         <div class="full-conversation-label-row">
-          <mat-checkbox [checked]="fullTextSearch" (change)="toggleSearchType()"></mat-checkbox>
-          <span class="full-conversation-label" i18n>Full Conversation Search </span>
+          <mat-checkbox [checked]="fullTextSearch" (change)="toggleSearchType()">
+            <span class="full-conversation-label" i18n>Full Conversation Search </span>
+          </mat-checkbox>
         </div>
         <button mat-icon-button (mouseenter)="toggleOverlay()" (mouseleave)="toggleOverlay()" cdkOverlayOrigin #trigger="cdkOverlayOrigin">
           <mat-icon>help_outline</mat-icon>

src/app/chat/chat-sidebar/chat-sidebar.scss

@@ -1,7 +1,5 @@
 @import '../../variables';
 
-
-
 .header {
   padding: 10px;
 
@@ -81,10 +79,6 @@ li:hover {
   margin-left: 4px;
 }
 
-.mat-checkbox {
-  margin-right: 4px;
-}
-
 .full-conversation-label {
   font-size: small;
   font-style: italic;

src/app/courses/courses.scss

@@ -4,10 +4,6 @@ $toolbar-height: 25vh;
 $label-height: 1rem;
 
 /* Column Widths */
-.mat-column-select {
-  max-width: 44px;
-}
-
 .mat-column-info {
   max-width: 200px;
   align-self: start;

src/app/exams/exams-add.component.html

@@ -16,7 +16,7 @@
           <div class="menu-button"><button mat-raised-button color="accent" type="button" [matMenuTriggerFor]="questionMenu" i18n>Add Question</button></div>
           <button mat-raised-button color="accent" type="button" (click)="showPreviewDialog()" i18n>Preview {examType, select, exam {Test} survey {Survey}}</button>
         </div>
-        <mat-checkbox *ngIf="isManagerRoute" formControlName="teamShareAllowed"><span style="font-size: small; font-style: italic; margin: 0.1rem" i18n>Allow team view</span></mat-checkbox>
+        <mat-checkbox *ngIf="isManagerRoute" formControlName="teamShareAllowed"><span style="font-size: small; font-style: italic;" i18n>Allow team view</span></mat-checkbox>
         <span *ngIf="showFormError" i18n class="mat-caption warn-text-color">Some required fields are missing.</span>
         <span *ngIf="showPreviewError" i18n class="mat-caption warn-text-color">You must add a question to preview the {examType, select, exam {test} survey {survey}}</span>
       </div>

src/app/exams/exams-question.scss

@@ -18,10 +18,6 @@
     max-height: 56px;
   }
 
-  .question-choices > div > mat-checkbox {
-    margin-right: 0.5rem;
-  }
-
   .type-title-container {
     display: grid;
     grid-template-columns: 1fr $form-width-1;

src/app/health/health-update.scss

@@ -26,24 +26,4 @@
     height: $view-container-height-no-toolbar
   }
 
-  .checkbox-group {
-    display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
-    gap: 0.5rem;
-    align-items: start;
-  }
-
-::ng-deep .checkbox-group .mat-checkbox-layout {
-  align-items: flex-start;
-}
-::ng-deep .checkbox-group .mat-checkbox-inner-container {
-  align-self: flex-start;
-  margin-top: 2px;
-}
-::ng-deep .checkbox-group .mat-checkbox-label {
-  display: block;
-  white-space: normal;
-  word-break: break-word;
-  line-height: 1.3;
-}
 }

src/app/resources/resources.scss

@@ -5,9 +5,6 @@ $label-height: 1rem;
 
 .resources-list {
   /* Column Widths */
-  .mat-column-select {
-    max-width: 44px;
-  }
   .mat-column-tags {
     max-width: 125px;
   }

src/app/shared/dialogs/dialogs-chat-share.component.html

@@ -5,8 +5,9 @@
         <mat-panel-title i18n="@@share-with-community-panel-title">Share with Community</mat-panel-title>
       </mat-expansion-panel-header>
       <ng-template matExpansionPanelContent>
-        <i i18n style="margin-right: 1rem;">add note</i>
-        <mat-checkbox [checked]="showForm" (change)="showForm = !showForm"></mat-checkbox><br>
+        <mat-checkbox [checked]="showForm" (change)="showForm = !showForm">
+          <i i18n>add note</i>
+        </mat-checkbox>
         <form [formGroup]="communityForm" (ngSubmit)="shareWithCommunity()">
           <mat-form-field *ngIf="showForm" class="full-width">
             <textarea

src/app/shared/material.module.ts

@@ -5,7 +5,7 @@ import { MatBadgeModule } from '@angular/material/badge';
 import { MatButtonModule } from '@angular/material/button';
 import { MatButtonToggleModule } from '@angular/material/button-toggle';
 import { MatLegacyCardModule as MatCardModule } from '@angular/material/legacy-card';
-import { MatLegacyCheckboxModule as MatCheckboxModule } from '@angular/material/legacy-checkbox';
+import { MatCheckboxModule } from '@angular/material/checkbox';
 import { MatLegacyChipsModule as MatChipsModule } from '@angular/material/legacy-chips';
 import { MatNativeDateModule, DateAdapter, NativeDateAdapter } from '@angular/material/core';
 import { MatLegacyDialogModule as MatDialogModule } from '@angular/material/legacy-dialog';

src/app/surveys/surveys.component.scss

@@ -1,9 +1,5 @@
 @import "../variables.scss";
 
-.mat-column-select {
-  max-width: 44px;
-}
-
 .mat-column-taken {
   max-width: 150px;
   display: flex;

src/app/tasks/tasks.scss

@@ -3,7 +3,7 @@
 planet-tasks {
   mat-action-list {
 
-    mat-checkbox {
+    .mat-mdc-checkbox {
       order: -1;
       margin-right: 0.5rem;
     }

src/app/users/users-achievements/users-achievements-update.component.html

@@ -86,7 +86,7 @@
           </planet-step-list>
           <button type="button" (click)="addLink()" mat-stroked-button color="primary" i18n>Enter a Link</button>
         </div>
-        <mat-checkbox formControlName="sendToNation" class="full-width" i18n>
+        <mat-checkbox formControlName="sendToNation" class="full-width achievements-checkbox" i18n>
           Allow your achievements to be shared with the nation
         </mat-checkbox>
       </form>

src/app/users/users-achievements/users-achievements-update.scss

@@ -22,9 +22,8 @@
     width: 100%;
   }
 
-  .mat-checkbox {
+  .achievements-checkbox {
     margin-top: 15px;
     margin-bottom: 15px;
-    display: block;
   }
 }

src/app/users/users-archive/users-archive.component.html

@@ -8,9 +8,12 @@ <h1 class="primary-text-color" i18n>Request for User Data Deletion</h1>
           <planet-markdown-textbox class="full-width" [required]="false" i18n-placeholder placeholder="Additional comments/Reason for data deletion request" [formControl]="archiveForm.controls.description"></planet-markdown-textbox>
           <mat-error><planet-form-error-messages [control]="archiveForm.controls.description"></planet-form-error-messages></mat-error>
         </mat-form-field>
-        <span style="font-style: italic; margin: 1rem;" i18n>I am aware that I will lose access to your account, resources, courses, teams/enterprises and achievements</span>
-        <mat-checkbox [checked]="confirmChoice" (change)="confirmChoice = !confirmChoice"></mat-checkbox><br>
-        <button type="submit" [disabled]="!confirmChoice" [planetSubmit]="spinnerOn && archiveForm.valid" mat-raised-button color="warn" style="margin: 1rem;" i18n>Delete User Data</button>
+        <mat-checkbox [checked]="confirmChoice" (change)="confirmChoice = !confirmChoice">
+          <span style="font-style: italic; margin: 1rem;" i18n>I am aware that I will lose access to your account, resources, courses, teams/enterprises and achievements</span>
+        </mat-checkbox>
+        <div class="action-button">
+          <button type="submit" [disabled]="!confirmChoice" [planetSubmit]="spinnerOn && archiveForm.valid" mat-raised-button color="warn" i18n>Delete User Data</button>
+        </div>
       </form>
     </div>
   </div>

src/app/users/users-table.scss

@@ -1,10 +1,6 @@
 @import '../variables';
 
 /* Column Widths */
-.mat-column-select {
-  max-width: 44px;
-}
-
 .mat-column-profile {
   max-width: 100px;
 }

src/styles.scss

@@ -350,6 +350,10 @@ body {
   // Note checkbox column must be named "select" in table
   .mat-column-select {
     overflow: visible;
+    // Reduce padding for MDC checkbox cells
+    padding-left: 12px !important;
+    // Constrain checkbox column width
+    max-width: 44px;
   }
 
   .planet-radio-section {