diff --git a/src/material-experimental/mdc-chips/chip-grid.spec.ts b/src/material-experimental/mdc-chips/chip-grid.spec.ts index bc8a9af2a4bc..96e44bcb7d25 100644 --- a/src/material-experimental/mdc-chips/chip-grid.spec.ts +++ b/src/material-experimental/mdc-chips/chip-grid.spec.ts @@ -694,7 +694,9 @@ describe('MDC-based MatChipGrid', () => { }); it('should set an asterisk after the placeholder if the control is required', () => { - let requiredMarker = fixture.debugElement.query(By.css('.mdc-floating-label--required'))!; + let requiredMarker = fixture.debugElement.query( + By.css('.mat-mdc-form-field-required-marker'), + )!; expect(requiredMarker) .withContext(`Expected placeholder not to have an asterisk, as control was not required.`) .toBeNull(); @@ -702,7 +704,7 @@ describe('MDC-based MatChipGrid', () => { fixture.componentInstance.chipGrid.required = true; fixture.detectChanges(); - requiredMarker = fixture.debugElement.query(By.css('.mdc-floating-label--required'))!; + requiredMarker = fixture.debugElement.query(By.css('.mat-mdc-form-field-required-marker'))!; expect(requiredMarker) .not.withContext(`Expected placeholder to have an asterisk, as control was required.`) .toBeNull(); @@ -714,7 +716,9 @@ describe('MDC-based MatChipGrid', () => { fixture.componentInstance.control = new FormControl(undefined, [Validators.required]); fixture.detectChanges(); - expect(fixture.nativeElement.querySelector('.mdc-floating-label--required')).toBeTruthy(); + expect( + fixture.nativeElement.querySelector('.mat-mdc-form-field-required-marker'), + ).toBeTruthy(); }); it('should blur the form field when the active chip is blurred', fakeAsync(() => { diff --git a/src/material-experimental/mdc-form-field/_form-field-density.scss b/src/material-experimental/mdc-form-field/_form-field-density.scss index 6fba9ed1dd50..acf52a2dcb13 100644 --- a/src/material-experimental/mdc-form-field/_form-field-density.scss +++ b/src/material-experimental/mdc-form-field/_form-field-density.scss @@ -77,7 +77,7 @@ // on whether a textarea is used. This is not possible in our implementation of the // form-field because we do not know what type of form-field control is set up. Hence // we always use a fixed position for the label. This does not have any implications. - .mat-mdc-form-field .mat-mdc-text-field-wrapper .mdc-floating-label { + .mat-mdc-form-field .mat-mdc-text-field-wrapper .mat-mdc-floating-label { top: math.div($height, 2); } @@ -107,7 +107,7 @@ // Update the spacing for filled form fields to account for the hidden floating label. @include _infix-vertical-spacing-filled( $no-label-padding, $no-label-padding); - .mat-mdc-text-field-wrapper:not(.mdc-text-field--outlined) .mdc-floating-label { + .mat-mdc-text-field-wrapper:not(.mdc-text-field--outlined) .mat-mdc-floating-label { display: none; } } diff --git a/src/material-experimental/mdc-form-field/_form-field-theme.scss b/src/material-experimental/mdc-form-field/_form-field-theme.scss index 3cd6d01776a5..bc7a53aac64f 100644 --- a/src/material-experimental/mdc-form-field/_form-field-theme.scss +++ b/src/material-experimental/mdc-form-field/_form-field-theme.scss @@ -76,7 +76,7 @@ // shows `body1` for text fields though, so we manually override the typography. // Note: Form controls inherit the typography from the parent form field. .mat-mdc-form-field, - .mat-mdc-form-field .mdc-floating-label { + .mat-mdc-floating-label { @include mdc-typography.typography(body1, $query: mdc-helpers.$mat-typography-styles-query); } diff --git a/src/material-experimental/mdc-form-field/_mdc-text-field-structure-overrides.scss b/src/material-experimental/mdc-form-field/_mdc-text-field-structure-overrides.scss index 873ff08b4a0d..ff0910fd72fe 100644 --- a/src/material-experimental/mdc-form-field/_mdc-text-field-structure-overrides.scss +++ b/src/material-experimental/mdc-form-field/_mdc-text-field-structure-overrides.scss @@ -20,7 +20,7 @@ // In order to ensure proper alignment of the floating label, we reset its line-height. // The line-height is not important as the element is absolutely positioned and only has one line // of text. - .mat-mdc-form-field .mdc-floating-label.mdc-floating-label { + .mat-mdc-form-field .mat-mdc-floating-label.mdc-floating-label { line-height: normal; } @@ -95,7 +95,7 @@ // the notched outline container, and already applies a specific horizontal spacing which // we do not want to overwrite. *Note*: We need to have increased specificity for this // override because the `right` property will be set with higher specificity in RTL mode. - .mat-mdc-text-field-wrapper .mat-mdc-form-field-infix .mdc-floating-label { + .mat-mdc-text-field-wrapper .mat-mdc-form-field-infix .mat-mdc-floating-label { left: auto; right: auto; } diff --git a/src/material-experimental/mdc-form-field/directives/floating-label.ts b/src/material-experimental/mdc-form-field/directives/floating-label.ts index e0932abb3d3b..bf4a43b494d5 100644 --- a/src/material-experimental/mdc-form-field/directives/floating-label.ts +++ b/src/material-experimental/mdc-form-field/directives/floating-label.ts @@ -25,16 +25,13 @@ import {ponyfill} from '@material/dom'; @Directive({ selector: 'label[matFormFieldFloatingLabel]', host: { - 'class': 'mdc-floating-label', - '[class.mdc-floating-label--required]': 'required', + 'class': 'mdc-floating-label mat-mdc-floating-label', '[class.mdc-floating-label--float-above]': 'floating', }, }) export class MatFormFieldFloatingLabel { /** Whether the label is floating. */ @Input() floating: boolean = false; - /** Whether the label is required. */ - @Input() required: boolean = false; constructor(private _elementRef: ElementRef) {} diff --git a/src/material-experimental/mdc-form-field/form-field.html b/src/material-experimental/mdc-form-field/form-field.html index b04dae1bc91e..644d9c951a0f 100644 --- a/src/material-experimental/mdc-form-field/form-field.html +++ b/src/material-experimental/mdc-form-field/form-field.html @@ -16,7 +16,6 @@ --> diff --git a/src/material-experimental/mdc-input/input.spec.ts b/src/material-experimental/mdc-input/input.spec.ts index bb30b65e3eb2..52438ebb4d21 100644 --- a/src/material-experimental/mdc-input/input.spec.ts +++ b/src/material-experimental/mdc-input/input.spec.ts @@ -345,7 +345,7 @@ describe('MatMdcInput without forms', () => { const label = fixture.debugElement.query(By.css('label'))!; expect(label).not.toBeNull(); expect(label.nativeElement.textContent).toBe('hello'); - expect(label.nativeElement.classList).toContain('mdc-floating-label--required'); + expect(label.nativeElement.querySelector('.mat-mdc-form-field-required-marker')).toBeTruthy(); })); it('should show the required star when using a FormControl', fakeAsync(() => { @@ -355,7 +355,7 @@ describe('MatMdcInput without forms', () => { const label = fixture.debugElement.query(By.css('label'))!; expect(label).not.toBeNull(); expect(label.nativeElement.textContent).toBe('Hello'); - expect(label.nativeElement.classList).toContain('mdc-floating-label--required'); + expect(label.nativeElement.querySelector('.mat-mdc-form-field-required-marker')).toBeTruthy(); })); it('should not hide the required star if input is disabled', () => { @@ -367,7 +367,7 @@ describe('MatMdcInput without forms', () => { const label = fixture.debugElement.query(By.css('label'))!; expect(label).not.toBeNull(); expect(label.nativeElement.textContent).toBe('hello'); - expect(label.nativeElement.classList).toContain('mdc-floating-label--required'); + expect(label.nativeElement.querySelector('.mat-mdc-form-field-required-marker')).toBeTruthy(); }); it('hide label required star when set to hide the required marker', fakeAsync(() => { @@ -376,13 +376,13 @@ describe('MatMdcInput without forms', () => { const label = fixture.debugElement.query(By.css('label'))!; expect(label).not.toBeNull(); - expect(label.nativeElement.classList).toContain('mdc-floating-label--required'); + expect(label.nativeElement.querySelector('.mat-mdc-form-field-required-marker')).toBeTruthy(); expect(label.nativeElement.textContent).toBe('hello'); fixture.componentInstance.hideRequiredMarker = true; fixture.detectChanges(); - expect(label.nativeElement.classList).not.toContain('mdc-floating-label--required'); + expect(label.nativeElement.querySelector('.mat-mdc-form-field-required-marker')).toBeFalsy(); expect(label.nativeElement.textContent).toBe('hello'); })); diff --git a/src/material-experimental/mdc-select/select.scss b/src/material-experimental/mdc-select/select.scss index 7defc9a0bf9d..810e1653d8ac 100644 --- a/src/material-experimental/mdc-select/select.scss +++ b/src/material-experimental/mdc-select/select.scss @@ -138,7 +138,7 @@ $scale: 0.75 !default; // container. Below are the styles to account for the select arrow icon at the end. .mat-mdc-form-field-type-mat-select { &.mat-form-field-appearance-fill { - .mdc-floating-label { + .mat-mdc-floating-label { max-width: calc(100% - #{$mat-select-placeholder-arrow-space}); } diff --git a/src/material-experimental/mdc-select/select.spec.ts b/src/material-experimental/mdc-select/select.spec.ts index 0a3519a2a267..06ec2d09ee67 100644 --- a/src/material-experimental/mdc-select/select.spec.ts +++ b/src/material-experimental/mdc-select/select.spec.ts @@ -2142,17 +2142,16 @@ describe('MDC-based MatSelect', () => { it('should set an asterisk after the label if control is required', fakeAsync(() => { const label = fixture.nativeElement.querySelector('.mat-mdc-form-field label'); - expect(label.classList).not.toContain( - 'mdc-floating-label--required', - `Expected label not to have an asterisk, as control was not required.`, - ); + expect(label.querySelector('.mat-mdc-form-field-required-marker')) + .withContext(`Expected label not to have an asterisk, as control was not required.`) + .toBeFalsy(); fixture.componentInstance.isRequired = true; fixture.detectChanges(); - expect(label.classList) + expect(label.querySelector('.mat-mdc-form-field-required-marker')) .withContext(`Expected label to have an asterisk, as control was required.`) - .toContain('mdc-floating-label--required'); + .toBeTruthy(); })); }); @@ -2975,7 +2974,7 @@ describe('MDC-based MatSelect', () => { it('should set an asterisk after the label if the FormControl is required', fakeAsync(() => { const label = fixture.nativeElement.querySelector('.mat-mdc-form-field label'); - expect(label.classList).toContain('mdc-floating-label--required'); + expect(label.querySelector('.mat-mdc-form-field-required-marker')).toBeTruthy(); })); });