fix(button): fix auto align classes when contains html children (#302)

positive-js · Oct 23, 2019 · d917eda · d917eda
1 parent c5ce58c
commit d917eda
Show file tree

Hide file tree

Showing 2 changed files with 58 additions and 17 deletions.
diff --git a/packages/mosaic/button/button.component.spec.ts b/packages/mosaic/button/button.component.spec.ts
@@ -141,6 +141,8 @@ describe('Button with icon', () => {
             imports: [McButtonModule, McIconModule],
             declarations: [
                 McButtonCommentCaseTestApp,
+                McButtonHtmlIconLeftCaseTestApp,
+                McButtonHtmlIconRightCaseTestApp,
                 McButtonTextIconCaseTestApp,
                 McButtonTwoIconsCaseTestApp
             ]
@@ -184,6 +186,24 @@ describe('Button with icon', () => {
         expect(fixture.debugElement.query(By.css('.mc-icon-button_left'))).toBeNull();
         expect(fixture.debugElement.query(By.css('.mc-icon-button_right'))).toBeNull();
     });
+
+    it('should add right css class when the sibling in an html element', () => {
+        const fixture = TestBed.createComponent(McButtonHtmlIconRightCaseTestApp);
+
+        fixture.detectChanges();
+
+        expect(fixture.debugElement.query(By.css('.mc-icon-button_right')))
+            .toBeTruthy('Expected the element has right css class');
+    });
+
+    it('should add left css class when the sibling in an html element', () => {
+        const fixture = TestBed.createComponent(McButtonHtmlIconLeftCaseTestApp);
+
+        fixture.detectChanges();
+
+        expect(fixture.debugElement.query(By.css('.mc-icon-button_left')))
+            .toBeTruthy('Expected the element has left css class');
+    });
 });
 
 
@@ -224,6 +244,28 @@ class TestApp {
 })
 class McButtonCommentCaseTestApp {}
 
+@Component({
+    selector: 'mc-button-two-icons-case-test-app',
+    template: `
+        <button mc-button type="button">
+            <span>Some text</span>
+            <i mc-icon="mc-angle-down-L_16"></i>
+        </button>
+    `
+})
+class McButtonHtmlIconRightCaseTestApp {}
+
+@Component({
+    selector: 'mc-button-two-icons-case-test-app',
+    template: `
+        <button mc-button type="button">
+            <i mc-icon="mc-angle-down-L_16"></i>
+            <span>Some text</span>
+        </button>
+    `
+})
+class McButtonHtmlIconLeftCaseTestApp {}
+
 @Component({
     selector: 'mc-button-text-icon-case-test-app',
     template: `

diff --git a/packages/mosaic/button/button.component.ts b/packages/mosaic/button/button.component.ts
@@ -4,7 +4,8 @@ import {
     Directive,
     ElementRef,
     OnDestroy,
-    ViewEncapsulation
+    ViewEncapsulation,
+    Renderer2
 } from '@angular/core';
 import { FocusMonitor } from '@ptsecurity/cdk/a11y';
 import { mixinColor, mixinDisabled, CanColor, CanDisable, CanDisableCtor, CanColorCtor } from '@ptsecurity/mosaic/core';
@@ -26,7 +27,10 @@ export class McButtonCssStyler {
 
     private icons: HTMLElement[] = [];
 
-    constructor(elementRef: ElementRef) {
+    constructor(
+        elementRef: ElementRef,
+        private renderer: Renderer2
+    ) {
         this.nativeElement = elementRef.nativeElement;
     }
 
@@ -43,28 +47,23 @@ export class McButtonCssStyler {
 
     private addClassModificatorForIcons() {
         const twoIcons = 2;
+        const [firstIconElement, secondIconElement] = this.icons;
 
         if (this.icons.length === 1) {
-            const iconElement = this.icons[0];
             const COMMENT_NODE = 8;
 
-            if (!iconElement.previousElementSibling && !iconElement.nextElementSibling) {
-                if (iconElement.nextSibling && iconElement.nextSibling.nodeType !== COMMENT_NODE) {
-                    iconElement.classList.add('mc-icon_left');
-                    this.nativeElement.classList.add('mc-icon-button_left');
-                }
+            if (firstIconElement.nextSibling && firstIconElement.nextSibling.nodeType !== COMMENT_NODE) {
+                this.renderer.addClass(firstIconElement, 'mc-icon_left');
+                this.renderer.addClass(this.nativeElement, 'mc-icon-button_left');
+            }
 
-                if (iconElement.previousSibling && iconElement.previousSibling.nodeType !== COMMENT_NODE) {
-                    iconElement.classList.add('mc-icon_right');
-                    this.nativeElement.classList.add('mc-icon-button_right');
-                }
+            if (firstIconElement.previousSibling && firstIconElement.previousSibling.nodeType !== COMMENT_NODE) {
+                this.renderer.addClass(firstIconElement, 'mc-icon_right');
+                this.renderer.addClass(this.nativeElement, 'mc-icon-button_right');
             }
         } else if (this.icons.length === twoIcons) {
-            const firstIconElement = this.icons[0];
-            const secondIconElement = this.icons[1];
-
-            firstIconElement.classList.add('mc-icon_left');
-            secondIconElement.classList.add('mc-icon_right');
+            this.renderer.addClass(firstIconElement, 'mc-icon_left');
+            this.renderer.addClass(secondIconElement, 'mc-icon_right');
         }
     }
 }