Skip to content

Commit debc56e

Browse files
stevenyxummalerba
authored andcommitted
fix(form-field): remove nonbreaking space before * for required fields (#15490)
The surrounding .mat-form-field-label is already white-space: nowrap so the &nbsp; 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.
1 parent 7402d02 commit debc56e

File tree

2 files changed

+5
-3
lines changed

2 files changed

+5
-3
lines changed

src/lib/form-field/form-field.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -52,7 +52,7 @@
5252
<span
5353
class="mat-placeholder-required mat-form-field-required-marker"
5454
aria-hidden="true"
55-
*ngIf="!hideRequiredMarker && _control.required && !_control.disabled">&nbsp;*</span>
55+
*ngIf="!hideRequiredMarker && _control.required && !_control.disabled">&#32;*</span>
5656
</label>
5757
</span>
5858
</div>

src/lib/input/input.spec.ts

+4-2
Original file line numberDiff line numberDiff line change
@@ -394,7 +394,7 @@ describe('MatInput without forms', () => {
394394

395395
let el = fixture.debugElement.query(By.css('label'));
396396
expect(el).not.toBeNull();
397-
expect(el.nativeElement.textContent).toMatch(/hello\s+\*/g);
397+
expect(el.nativeElement.textContent).toMatch(/hello +\*/g);
398398
}));
399399

400400
it('should hide the required star if input is disabled', () => {
@@ -407,6 +407,7 @@ describe('MatInput without forms', () => {
407407

408408
expect(el).not.toBeNull();
409409
expect(el.nativeElement.textContent!.trim()).toMatch(/^hello$/);
410+
expect(el.nativeElement.textContent).not.toMatch(/\*/g);
410411
});
411412

412413
it('should hide the required star from screen readers', fakeAsync(() => {
@@ -424,12 +425,13 @@ describe('MatInput without forms', () => {
424425

425426
let el = fixture.debugElement.query(By.css('label'));
426427
expect(el).not.toBeNull();
427-
expect(el.nativeElement.textContent).toMatch(/hello\s+\*/g);
428+
expect(el.nativeElement.textContent).toMatch(/hello +\*/g);
428429

429430
fixture.componentInstance.hideRequiredMarker = true;
430431
fixture.detectChanges();
431432

432433
expect(el.nativeElement.textContent).toMatch(/hello/g);
434+
expect(el.nativeElement.textContent).not.toMatch(/\*/g);
433435
}));
434436

435437
it('supports the disabled attribute as binding', fakeAsync(() => {

0 commit comments

Comments
 (0)