diff --git a/src/SIL.XForge.Scripture/ClientApp/src/app/checking/import-questions-dialog/import-questions-dialog.component.spec.ts b/src/SIL.XForge.Scripture/ClientApp/src/app/checking/import-questions-dialog/import-questions-dialog.component.spec.ts index 533b84452e..8f32c8bbdf 100644 --- a/src/SIL.XForge.Scripture/ClientApp/src/app/checking/import-questions-dialog/import-questions-dialog.component.spec.ts +++ b/src/SIL.XForge.Scripture/ClientApp/src/app/checking/import-questions-dialog/import-questions-dialog.component.spec.ts @@ -3,7 +3,7 @@ import { HttpClientTestingModule } from '@angular/common/http/testing'; import { NgModule } from '@angular/core'; import { ComponentFixture, fakeAsync, flush, TestBed, tick } from '@angular/core/testing'; import { FormsModule, ReactiveFormsModule, UntypedFormControl } from '@angular/forms'; -import { MatLegacyCheckbox as MatCheckbox } from '@angular/material/legacy-checkbox'; +import { MatCheckbox } from '@angular/material/checkbox'; import { MatLegacyDialog as MatDialog, MatLegacyDialogRef as MatDialogRef } from '@angular/material/legacy-dialog'; import { NoopAnimationsModule } from '@angular/platform-browser/animations'; import { Canon, VerseRef } from '@sillsdev/scripture'; @@ -670,7 +670,7 @@ class TestEnvironment { } getRowReference(row: HTMLElement): string { - return row.querySelector('td .mat-checkbox-label')?.textContent?.trim() || ''; + return row.querySelector('td mat-checkbox .mdc-label')?.textContent?.trim() || ''; } getRowQuestion(row: HTMLElement): string { diff --git a/src/SIL.XForge.Scripture/ClientApp/src/app/checking/import-questions-dialog/import-questions-dialog.component.ts b/src/SIL.XForge.Scripture/ClientApp/src/app/checking/import-questions-dialog/import-questions-dialog.component.ts index 685d934201..422ca398a5 100644 --- a/src/SIL.XForge.Scripture/ClientApp/src/app/checking/import-questions-dialog/import-questions-dialog.component.ts +++ b/src/SIL.XForge.Scripture/ClientApp/src/app/checking/import-questions-dialog/import-questions-dialog.component.ts @@ -1,6 +1,6 @@ import { Component, ElementRef, Inject, NgZone, OnDestroy, ViewChild } from '@angular/core'; import { AbstractControl, UntypedFormControl, UntypedFormGroup } from '@angular/forms'; -import { MatLegacyCheckbox as MatCheckbox } from '@angular/material/legacy-checkbox'; +import { MatCheckbox } from '@angular/material/checkbox'; import { MatLegacyDialogConfig as MatDialogConfig, MatLegacyDialogRef as MatDialogRef, diff --git a/src/SIL.XForge.Scripture/ClientApp/src/app/connect-project/connect-project.component.scss b/src/SIL.XForge.Scripture/ClientApp/src/app/connect-project/connect-project.component.scss index c878bb6379..0b22177b2c 100644 --- a/src/SIL.XForge.Scripture/ClientApp/src/app/connect-project/connect-project.component.scss +++ b/src/SIL.XForge.Scripture/ClientApp/src/app/connect-project/connect-project.component.scss @@ -62,10 +62,6 @@ mat-divider + .card-content { padding-top: 16px; } - - mat-checkbox { - padding-bottom: 12px; - } } #connect-submit-button { @@ -94,15 +90,6 @@ } } } -::ng-deep .checkbox-placeholder { - .mat-checkbox-inner-container { - visibility: hidden; - } - - .mat-checkbox-label { - color: initial; - } -} #based-on-field { max-width: calc(100% - 44px); diff --git a/src/SIL.XForge.Scripture/ClientApp/src/app/settings/settings.component.scss b/src/SIL.XForge.Scripture/ClientApp/src/app/settings/settings.component.scss index 255d423bd3..7861e67131 100644 --- a/src/SIL.XForge.Scripture/ClientApp/src/app/settings/settings.component.scss +++ b/src/SIL.XForge.Scripture/ClientApp/src/app/settings/settings.component.scss @@ -98,24 +98,14 @@ mat-icon { } } -.mat-checkbox { +.mat-mdc-checkbox { padding: 3px 0px; } -::ng-deep .mat-checkbox-label { +::ng-deep .mat-mdc-checkbox .mdc-label { line-height: normal !important; } -::ng-deep .checkbox-placeholder { - .mat-checkbox-inner-container { - visibility: hidden; - } - - .mat-checkbox-label { - color: initial; - } -} - #delete-project { border: 2px solid red; .source-project-msg { diff --git a/src/SIL.XForge.Scripture/ClientApp/src/app/users/collaborators/collaborators.component.scss b/src/SIL.XForge.Scripture/ClientApp/src/app/users/collaborators/collaborators.component.scss index 6e0ff3dbd4..f1ccc9ce76 100644 --- a/src/SIL.XForge.Scripture/ClientApp/src/app/users/collaborators/collaborators.component.scss +++ b/src/SIL.XForge.Scripture/ClientApp/src/app/users/collaborators/collaborators.component.scss @@ -60,7 +60,7 @@ h3 { } // Allow the questions permission label to wrap on whitespace to prevent layout issues -.mat-column-questions_permission .mat-column-audio_permission .mat-checkbox ::ng-deep label { +.mat-column-questions_permission .mat-column-audio_permission .mat-mdc-checkbox ::ng-deep label { white-space: initial; } diff --git a/src/SIL.XForge.Scripture/ClientApp/src/material-styles.scss b/src/SIL.XForge.Scripture/ClientApp/src/material-styles.scss index bb50a119ec..6b44e4554c 100644 --- a/src/SIL.XForge.Scripture/ClientApp/src/material-styles.scss +++ b/src/SIL.XForge.Scripture/ClientApp/src/material-styles.scss @@ -117,7 +117,7 @@ $material-theme-accent-error: mat.define-light-theme( @include mat.legacy-button-theme($material-app-theme); @include mat.button-toggle-theme($material-app-theme); @include mat.legacy-card-theme($material-app-theme); -@include mat.legacy-checkbox-theme($material-app-theme); +@include mat.checkbox-theme($material-app-theme); @include mat.chips-theme($material-app-theme); @include mat.legacy-dialog-theme($material-app-theme); @include mat.divider-theme($material-app-theme); diff --git a/src/SIL.XForge.Scripture/ClientApp/src/styles.scss b/src/SIL.XForge.Scripture/ClientApp/src/styles.scss index 7e3e97cfa6..82d28854ec 100644 --- a/src/SIL.XForge.Scripture/ClientApp/src/styles.scss +++ b/src/SIL.XForge.Scripture/ClientApp/src/styles.scss @@ -63,10 +63,34 @@ as-split.is-disabled > .as-split-gutter .as-split-gutter-icon { font-family: variables.$languageFonts; } -// Allows checkbox label word-wrap -// https://github.com/angular/components/issues/8416 -.mat-checkbox-layout { - white-space: normal !important; +// Decrease the padding around a checkbox to be 0px as spacing is instead usually applied in other ways e.g. padding on +// containing element or table row-gap +.mat-mdc-checkbox { + --mdc-checkbox-state-layer-size: 18px; + + .mat-mdc-checkbox-ripple, + .mdc-checkbox__ripple { + top: -6px; + left: -6px; + right: -6px; + bottom: -6px; + } + + label { + padding-left: 6px !important; + } +} + +// Make checkbox labels inherit parent element's font-weight e.g. if within a table heading +.mat-mdc-checkbox .mdc-form-field { + font-weight: inherit !important; +} + +// Remove the ripple background for checkbox focus state to emulate pre-MDC behavior +.mat-mdc-checkbox { + .mdc-checkbox__native-control:focus ~ .mdc-checkbox__ripple { + opacity: 0 !important; + } } .mat-progress-bar--closed { diff --git a/src/SIL.XForge.Scripture/ClientApp/src/xforge-common/feature-flags/feature-flags-dialog.component.spec.ts b/src/SIL.XForge.Scripture/ClientApp/src/xforge-common/feature-flags/feature-flags-dialog.component.spec.ts index eaae6addab..9c76c77e89 100644 --- a/src/SIL.XForge.Scripture/ClientApp/src/xforge-common/feature-flags/feature-flags-dialog.component.spec.ts +++ b/src/SIL.XForge.Scripture/ClientApp/src/xforge-common/feature-flags/feature-flags-dialog.component.spec.ts @@ -4,7 +4,7 @@ import { HttpClientTestingModule } from '@angular/common/http/testing'; import { DebugElement, NgModule } from '@angular/core'; import { ComponentFixture, fakeAsync, flush, TestBed, tick } from '@angular/core/testing'; import { FormsModule, ReactiveFormsModule } from '@angular/forms'; -import { MatLegacyCheckbox as MatCheckbox } from '@angular/material/legacy-checkbox'; +import { MatCheckbox } from '@angular/material/checkbox'; import { MatLegacyDialog as MatDialog, MatLegacyDialogConfig as MatDialogConfig diff --git a/src/SIL.XForge.Scripture/ClientApp/src/xforge-common/system-administration/sa-projects.component.spec.ts b/src/SIL.XForge.Scripture/ClientApp/src/xforge-common/system-administration/sa-projects.component.spec.ts index 539a7322f9..20acbfdfed 100644 --- a/src/SIL.XForge.Scripture/ClientApp/src/xforge-common/system-administration/sa-projects.component.spec.ts +++ b/src/SIL.XForge.Scripture/ClientApp/src/xforge-common/system-administration/sa-projects.component.spec.ts @@ -1,7 +1,7 @@ import { HttpClientTestingModule } from '@angular/common/http/testing'; import { DebugElement, getDebugNode } from '@angular/core'; import { ComponentFixture, TestBed, fakeAsync, tick } from '@angular/core/testing'; -import { MatLegacyCheckbox as MatCheckbox } from '@angular/material/legacy-checkbox'; +import { MatCheckbox } from '@angular/material/checkbox'; import { By } from '@angular/platform-browser'; import { NoopAnimationsModule } from '@angular/platform-browser/animations'; import { RouterTestingModule } from '@angular/router/testing'; diff --git a/src/SIL.XForge.Scripture/ClientApp/src/xforge-common/ui-common.module.ts b/src/SIL.XForge.Scripture/ClientApp/src/xforge-common/ui-common.module.ts index bf77fe5fab..f2037e738a 100644 --- a/src/SIL.XForge.Scripture/ClientApp/src/xforge-common/ui-common.module.ts +++ b/src/SIL.XForge.Scripture/ClientApp/src/xforge-common/ui-common.module.ts @@ -15,7 +15,7 @@ import { MatIconModule } from '@angular/material/icon'; import { MatInputModule } from '@angular/material/input'; import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button'; 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 { MatLegacyDialogModule as MatDialogModule } from '@angular/material/legacy-dialog'; import { MatLegacyListModule as MatListModule } from '@angular/material/legacy-list'; import { MatLegacyMenuModule as MatMenuModule } from '@angular/material/legacy-menu';