fix(checkbox): no side margin if label has no content

* Remove side margin in checkbox if label has no content. * Use `checkboxNativeElement` instead of `checkboxDebugElement.nativeElement` in expect statements. * Fix typo. Closes angular#2011
belev · Apr 25, 2017 · 744505f · 744505f
1 parent bfdef8e
commit 744505f
Show file tree

Hide file tree

Showing 4 changed files with 50 additions and 11 deletions.
diff --git a/src/lib/checkbox/checkbox.html b/src/lib/checkbox/checkbox.html
@@ -1,5 +1,6 @@
 <label class="mat-checkbox-layout" #label>
-  <div class="mat-checkbox-inner-container">
+  <div class="mat-checkbox-inner-container"
+       [class.mat-checkbox-inner-container-no-side-margin]="!_hasLabel()">
     <input #input
            class="mat-checkbox-input cdk-visually-hidden" type="checkbox"
            [id]="inputId"
@@ -34,7 +35,7 @@
       <div class="mat-checkbox-mixedmark"></div>
     </div>
   </div>
-  <span class="mat-checkbox-label">
+  <span class="mat-checkbox-label" #labelWrapper>
     <ng-content></ng-content>
   </span>
 </label>
diff --git 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
@@ -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: `<md-checkbox></md-checkbox>`
+})
+class CheckboxWithoutLabel {}
diff --git 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 `<input type="checkbox"> 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;
 
   /**