fix(button): make sure icon has margins when button has html co… (#1953)

akveo · Sep 11, 2019 · a17accb · a17accb
1 parent 2f427be
commit a17accb
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 3 deletions.
diff --git a/src/framework/theme/components/button/button.component.ts b/src/framework/theme/components/button/button.component.ts
@@ -19,7 +19,7 @@ import {
 import { NbComponentStatus } from '../component-status';
 import { NbComponentShape } from '../component-shape';
 import { NbComponentSize } from '../component-size';
-import { convertToBoolProperty } from '../helpers';
+import { convertToBoolProperty, firstChildNotComment, lastChildNotComment } from '../helpers';
 
 export type NbButtonAppearance = 'filled' | 'outline' | 'ghost' | 'hero';
 
@@ -528,14 +528,14 @@ export class NbButtonComponent implements AfterViewInit {
  get iconLeft(): boolean {
  const el = this.hostElement.nativeElement;
  const icon = this.iconElement;
- return !!(icon && el.firstChild === icon);
+ return !!(icon && firstChildNotComment(el) === icon);
  }
 
  @HostBinding('class.icon-end')
  get iconRight(): boolean {
  const el = this.hostElement.nativeElement;
  const icon = this.iconElement;
- return !!(icon && el.lastChild === icon);
+ return !!(icon && lastChildNotComment(el) === icon);
  }
 
  @HostBinding('class.transitions')

diff --git a/src/framework/theme/components/helpers.ts b/src/framework/theme/components/helpers.ts
@@ -26,3 +26,16 @@ export function getElementHeight(el) {
  return el.offsetHeight + marginTop + marginBottom;
 }
 
+export function firstChildNotComment(node: Node) {
+ const children = Array
+ .from(node.childNodes)
+ .filter((child: Node) => child.nodeType !== Node.COMMENT_NODE);
+ return children[0];
+}
+
+export function lastChildNotComment(node: Node) {
+ const children = Array
+ .from(node.childNodes)
+ .filter((child: Node) => child.nodeType !== Node.COMMENT_NODE);
+ return children[children.length - 1];
+}