diff --git a/src/lib/checkbox/checkbox.html b/src/lib/checkbox/checkbox.html index e2ebc48b0249..7676f48c69f8 100644 --- a/src/lib/checkbox/checkbox.html +++ b/src/lib/checkbox/checkbox.html @@ -1,5 +1,6 @@ diff --git a/src/lib/checkbox/checkbox.scss b/src/lib/checkbox/checkbox.scss index 26a2d2ea5469..196cde2bd044 100644 --- a/src/lib/checkbox/checkbox.scss +++ b/src/lib/checkbox/checkbox.scss @@ -228,6 +228,13 @@ $_mat-checkbox-mark-stroke-size: 2 / 15 * $mat-checkbox-size !default; } } +.mat-checkbox-inner-container-no-side-margin { + margin: { + left: 0; + right: 0; + } +} + // TODO(kara): Remove this style when fixing vertical baseline .mat-checkbox-layout .mat-checkbox-label { line-height: 24px; diff --git a/src/lib/checkbox/checkbox.spec.ts b/src/lib/checkbox/checkbox.spec.ts index 0224157dbda5..e9efe7219bd7 100644 --- a/src/lib/checkbox/checkbox.spec.ts +++ b/src/lib/checkbox/checkbox.spec.ts @@ -32,6 +32,7 @@ describe('MdCheckbox', () => { CheckboxWithNameAttribute, CheckboxWithChangeEvent, CheckboxWithFormControl, + CheckboxWithoutLabel, ], providers: [ {provide: ViewportRuler, useClass: FakeViewportRuler} @@ -436,28 +437,28 @@ describe('MdCheckbox', () => { it('should apply class based on color attribute', () => { testComponent.checkboxColor = 'primary'; fixture.detectChanges(); - expect(checkboxDebugElement.nativeElement.classList.contains('mat-primary')).toBe(true); + expect(checkboxNativeElement.classList.contains('mat-primary')).toBe(true); testComponent.checkboxColor = 'accent'; fixture.detectChanges(); - expect(checkboxDebugElement.nativeElement.classList.contains('mat-accent')).toBe(true); + expect(checkboxNativeElement.classList.contains('mat-accent')).toBe(true); }); it('should should not clear previous defined classes', () => { - checkboxDebugElement.nativeElement.classList.add('custom-class'); + checkboxNativeElement.classList.add('custom-class'); testComponent.checkboxColor = 'primary'; fixture.detectChanges(); - expect(checkboxDebugElement.nativeElement.classList.contains('mat-primary')).toBe(true); - expect(checkboxDebugElement.nativeElement.classList.contains('custom-class')).toBe(true); + expect(checkboxNativeElement.classList.contains('mat-primary')).toBe(true); + expect(checkboxNativeElement.classList.contains('custom-class')).toBe(true); testComponent.checkboxColor = 'accent'; fixture.detectChanges(); - expect(checkboxDebugElement.nativeElement.classList.contains('mat-primary')).toBe(false); - expect(checkboxDebugElement.nativeElement.classList.contains('mat-accent')).toBe(true); - expect(checkboxDebugElement.nativeElement.classList.contains('custom-class')).toBe(true); + expect(checkboxNativeElement.classList.contains('mat-primary')).toBe(false); + expect(checkboxNativeElement.classList.contains('mat-accent')).toBe(true); + expect(checkboxNativeElement.classList.contains('custom-class')).toBe(true); }); }); @@ -730,7 +731,6 @@ describe('MdCheckbox', () => { }); }); - describe('with form control', () => { let checkboxDebugElement: DebugElement; let checkboxInstance: MdCheckbox; @@ -763,6 +763,22 @@ describe('MdCheckbox', () => { expect(inputElement.disabled).toBe(false); }); }); + + describe('without label', () => { + let checkboxDebugElement: DebugElement; + let checkboxNativeElement: HTMLElement; + + it('should add a css class to inner-container to remove side margin', () => { + fixture = TestBed.createComponent(CheckboxWithoutLabel); + fixture.detectChanges(); + checkboxDebugElement = fixture.debugElement.query(By.directive(MdCheckbox)); + checkboxNativeElement = checkboxDebugElement.nativeElement; + + let checkboxInnerContainerWithoutMarginCount = checkboxNativeElement + .querySelectorAll('.mat-checkbox-inner-container-no-side-margin').length; + expect(checkboxInnerContainerWithoutMarginCount).toBe(1); + }); + }); }); /** Simple component for testing a single checkbox. */ @@ -872,3 +888,9 @@ class CheckboxWithChangeEvent { class CheckboxWithFormControl { formControl = new FormControl(); } + +/** Test component without label */ +@Component({ + template: `` +}) +class CheckboxWithoutLabel {} diff --git a/src/lib/checkbox/checkbox.ts b/src/lib/checkbox/checkbox.ts index 0bc2259a3b9f..08da9d6965ed 100644 --- a/src/lib/checkbox/checkbox.ts +++ b/src/lib/checkbox/checkbox.ts @@ -162,6 +162,15 @@ export class MdCheckbox implements ControlValueAccessor, AfterViewInit, OnDestro /** The native ` element */ @ViewChild('input') _inputElement: ElementRef; + @ViewChild('labelWrapper') _labelWrapper: ElementRef; + + /** Whether the checkbox has label */ + _hasLabel(): boolean { + const labelText = this._labelWrapper.nativeElement.textContent || ''; + return !!labelText.trim().length; + } + + /** Called when the checkbox is blurred. Needed to properly implement ControlValueAccessor. */ @ViewChild(MdRipple) _ripple: MdRipple; /**