fix to defecthunt issues in button (#3249)

SAP · Sep 11, 2020 · 95d1355 · 95d1355
1 parent a6aa8de
commit 95d1355
Show file tree

Hide file tree

Showing 7 changed files with 30 additions and 31 deletions.
diff --git a/.../docs/src/app/platform/component-docs/platform-button/platform-button-docs.component.html b/.../docs/src/app/platform/component-docs/platform-button/platform-button-docs.component.html
@@ -1,8 +1,8 @@
 <fd-docs-section-title [id]="'Button-types'" [componentName]="'button'"> Button Types </fd-docs-section-title>
 <description>
-    The default button does not require modifier. Use <code class="code-snippet">[buttonType]="'emphasized'",
-    [buttonType]="'ghost'", [buttonType]="'positive'",[buttonType]="'attention'", [buttonType]="'transparent'" or
-    [buttonType]="'negative'" </code>to modify the type of the button.
+    The default button does not require modifier. Use <code class="code-snippet">buttonType="emphasized",
+    buttonType="host", buttonType="positive",buttonType="attention", buttonType="transparent" or
+    buttonType="negative" </code>to modify the type of the button.
 </description>
 <component-example>
     <fdp-button-types-example></fdp-button-types-example>
@@ -11,8 +11,7 @@
 <separator></separator>
 
 <fd-docs-section-title [id]="'Button-sizes'" [componentName]="'button'"> Button Sizes </fd-docs-section-title>
-<description> Button support two sized: compact and cozy. Use <code
-        class="code-snippet">[contentDensity]="'compact'"</code>
+<description> Button support two sized: compact and cozy. Use <code class="code-snippet">contentDensity="compact"</code>
     to set the values. </description>
 <component-example>
     <fdp-button-sizes-example></fdp-button-sizes-example>
@@ -25,7 +24,7 @@
 </fd-docs-section-title>
 <description>
     Use
-    <code class="code-snippet">[glyph]="'{{ '{' }}icon-name}'"</code> to add an icon to the button.
+    <code class="code-snippet">glyph="icon-name"</code> to add an icon to the button.
 </description>
 <component-example>
     <fdp-button-icons-example></fdp-button-icons-example>

diff --git a/...ocs/platform-button/platform-button-examples/platform-button-icons-example.component.html b/...ocs/platform-button/platform-button-examples/platform-button-icons-example.component.html
@@ -1,9 +1,9 @@
-<fdp-button [glyph]="'cart'">Add to Cart</fdp-button>
-<fdp-button [buttonType]="'attention'" [glyph]="'cart'">Add to Cart</fdp-button>
-<fdp-button [buttonType]="'negative'" [glyph]="'filter'">Filter</fdp-button>
-<fdp-button [buttonType]="'positive'" [glyph]="'accept'">Approve</fdp-button>
-<fdp-button [glyph]="'cart'" title="cart"></fdp-button>
-<fdp-button [buttonType]="'empasized'" [glyph]="'cart'" title="cart"></fdp-button>
-<fdp-button [buttonType]="'negative'" [glyph]="'filter'" title="filter"></fdp-button>
-<fdp-button [buttonType]="'positive'" [glyph]="'accept'" title="accept"></fdp-button>
-<fdp-button [buttonType]="'transparent'" [glyph]="'menu2'" title="menu2"></fdp-button>
+<fdp-button glyph="cart">Add to Cart</fdp-button>
+<fdp-button buttonType="attention" glyph="cart">Add to Cart</fdp-button>
+<fdp-button buttonType="negative" glyph="filter">Filter</fdp-button>
+<fdp-button buttonType="positive" glyph="accept">Approve</fdp-button>
+<fdp-button glyph="cart" title="cart"></fdp-button>
+<fdp-button buttonType="empasized" glyph="cart" title="cart"></fdp-button>
+<fdp-button buttonType="negative" glyph="filter" title="filter"></fdp-button>
+<fdp-button buttonType="positive" glyph="accept" title="accept"></fdp-button>
+<fdp-button buttonType="transparent" glyph="menu2" title="menu2"></fdp-button>
diff --git a/...ocs/platform-button/platform-button-examples/platform-button-sizes-example.component.html b/...ocs/platform-button/platform-button-examples/platform-button-sizes-example.component.html
@@ -1,2 +1,2 @@
 <fdp-button>Normal Button</fdp-button>
-<fdp-button [contentDensity]="'compact'">Compact Button</fdp-button>
+<fdp-button contentDensity="compact">Compact Button</fdp-button>
diff --git a/...ocs/platform-button/platform-button-examples/platform-button-state-example.component.html b/...ocs/platform-button/platform-button-examples/platform-button-state-example.component.html
@@ -1,3 +1,3 @@
-<fdp-button [ariaSelected]="true">Selected State</fdp-button>
-<fdp-button [ariaDisabled]="true">Disabled State</fdp-button>
-<fdp-button [disabled]="true">Disabled State</fdp-button>
+<fdp-button ariaSelected="true">Selected State</fdp-button>
+<fdp-button ariaDisabled="true">Disabled State</fdp-button>
+<fdp-button disabled="true">Disabled State</fdp-button>
diff --git a/...ocs/platform-button/platform-button-examples/platform-button-types-example.component.html b/...ocs/platform-button/platform-button-examples/platform-button-types-example.component.html
@@ -1,7 +1,7 @@
 <fdp-button>Standard Button</fdp-button>
-<fdp-button [buttonType]="'emphasized'">Emphasized Button</fdp-button>
-<fdp-button [buttonType]="'ghost'">Ghost Button</fdp-button>
-<fdp-button [buttonType]="'positive'">Positive Button</fdp-button>
-<fdp-button [buttonType]="'attention'">Attention Button</fdp-button>
-<fdp-button [buttonType]="'negative'">Negative Button</fdp-button>
-<fdp-button [buttonType]="'transparent'">Transparent Button</fdp-button>
+<fdp-button buttonType="emphasized">Emphasized Button</fdp-button>
+<fdp-button buttonType="ghost">Ghost Button</fdp-button>
+<fdp-button buttonType="positive">Positive Button</fdp-button>
+<fdp-button buttonType="attention">Attention Button</fdp-button>
+<fdp-button buttonType="negative">Negative Button</fdp-button>
+<fdp-button buttonType="transparent">Transparent Button</fdp-button>
diff --git a/libs/platform/src/lib/components/button/button.component.html b/libs/platform/src/lib/components/button/button.component.html
@@ -1,5 +1,5 @@
 <button #fdButton fd-button [attr.id]="id" [attr.title]="title" [attr.name]="name" [attr.aria-label]="title"
-    [attr.type]="type" [attr.value]="value" [attr.aria-selected]="ariaSelected" [attr.aria-disabled]="ariaDisabled"
+    [type]="type" [attr.value]="value" [attr.aria-selected]="ariaSelected" [attr.aria-disabled]="ariaDisabled"
     [compact]="contentDensity === 'compact'" [glyph]="glyph" [disabled]="disabled" (click)="onBtnClick($event)"
     [fdType]="buttonType" [ngStyle]="{ width: width }">
     <ng-content></ng-content>

diff --git a/libs/platform/src/lib/components/button/button.component.ts b/libs/platform/src/lib/components/button/button.component.ts
@@ -77,15 +77,15 @@ export class ButtonComponent extends BaseComponent implements AfterViewInit {
         super(_changeDetector);
     }
 
+    /**@hidden */
+    ngAfterViewInit(): void {
+        this._elementRef.nativeElement.childNodes[0].classList.add('fd-ellipsis');
+    }
+
     /**
      *  Handles button click
      */
     public onBtnClick($event: any): void {
         this.buttonClicked.emit($event);
     }
-
-    /**@hidden*/
-    ngAfterViewInit(): void {
-        this._elementRef.nativeElement.childNodes[0].classList.add('fd-ellipsis');
-    }
 }