fix(form-field): remove nonbreaking space before * for required fields (#15490)

The surrounding .mat-form-field-label is already white-space: nowrap so the   doesn't serve any
wrap-preventing function. But it does prevent any trailing <mat-label> spacing from collapsing with
the space before the asterisk, causing for a bad visual appearance of a double space in these cases.
This commit is contained in:
Steven Xu
2019-04-02 08:50:23 -07:00
committed by mmalerba
parent 7402d028f6
commit debc56e7db
2 changed files with 5 additions and 3 deletions
+1 -1
View File
@@ -52,7 +52,7 @@
<span
class="mat-placeholder-required mat-form-field-required-marker"
aria-hidden="true"
*ngIf="!hideRequiredMarker && _control.required && !_control.disabled">&nbsp;*</span>
*ngIf="!hideRequiredMarker && _control.required && !_control.disabled">&#32;*</span>
</label>
</span>
</div>
+4 -2
View File
@@ -394,7 +394,7 @@ describe('MatInput without forms', () => {
let el = fixture.debugElement.query(By.css('label'));
expect(el).not.toBeNull();
expect(el.nativeElement.textContent).toMatch(/hello\s+\*/g);
expect(el.nativeElement.textContent).toMatch(/hello +\*/g);
}));
it('should hide the required star if input is disabled', () => {
@@ -407,6 +407,7 @@ describe('MatInput without forms', () => {
expect(el).not.toBeNull();
expect(el.nativeElement.textContent!.trim()).toMatch(/^hello$/);
expect(el.nativeElement.textContent).not.toMatch(/\*/g);
});
it('should hide the required star from screen readers', fakeAsync(() => {
@@ -424,12 +425,13 @@ describe('MatInput without forms', () => {
let el = fixture.debugElement.query(By.css('label'));
expect(el).not.toBeNull();
expect(el.nativeElement.textContent).toMatch(/hello\s+\*/g);
expect(el.nativeElement.textContent).toMatch(/hello +\*/g);
fixture.componentInstance.hideRequiredMarker = true;
fixture.detectChanges();
expect(el.nativeElement.textContent).toMatch(/hello/g);
expect(el.nativeElement.textContent).not.toMatch(/\*/g);
}));
it('supports the disabled attribute as binding', fakeAsync(() => {