fix: (platform) updating button with styles 0.12.0 (#3514)

* update platform button with 3400 changes

* removed blank space

updating kevins review commmnts

imported gyphposition from core

apps/docs/src/app/platform/component-docs/platform-button/platform-button-docs.component.html

@@ -3,6 +3,7 @@
     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.
+    Use <code class="code-snippet">label="text"</code> to give label to the button.
 </description>
 <component-example>
     <fdp-button-types-example></fdp-button-types-example>
@@ -12,7 +13,7 @@
 
 <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>
-    to set the values. </description>
+    to set the values.Use <code class="code-snippet">label="text"</code> to give label to the button. </description>
 <component-example>
     <fdp-button-sizes-example></fdp-button-sizes-example>
 </component-example>
@@ -24,7 +25,11 @@
 </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 and
+    use <code class="code-snippet">label="text"</code> to give label to the button.
+    <br><br>
+    <code class="code-snippet">glyphPosition="before"</code> before and after are used to
+    place the icons beside label.
 </description>
 <component-example>
     <fdp-button-icons-example></fdp-button-icons-example>
@@ -37,7 +42,7 @@
 </fd-docs-section-title>
 <description>
     'disabled' and 'selected' states can be achieved through 'disabled' / 'ariaDisabled' and 'ariaSelected'
-    attributes.
+    attributes.Use <code class="code-snippet">label="text"</code> to give label to the button.
 </description>
 <component-example>
     <fdp-button-state-example></fdp-button-state-example>
@@ -52,7 +57,9 @@
 <description>
     When user specifices width of the button then text will start truncating to accomadate it self in the
     specified
-    width as shown below
+    width as shown below.
+    <br><br>
+    Use <code class="code-snippet">label="text"</code> to give label to the button.
 </description>
 <component-example>
     <fdp-button-truncate-example></fdp-button-truncate-example>

apps/docs/src/app/platform/component-docs/platform-button/platform-button-examples/platform-button-icons-example.component.html

@@ -1,7 +1,7 @@
-<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" label="Add to Cart"></fdp-button>
+<fdp-button buttonType="attention" glyph="cart" label="Add to Cart"></fdp-button>
+<fdp-button buttonType="negative" glyph="filter" label="Filter"></fdp-button>
+<fdp-button buttonType="positive" glyph="accept" label="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>

apps/docs/src/app/platform/component-docs/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 label="Normal Button"></fdp-button>
+<fdp-button contentDensity="compact" label="Compact Button"></fdp-button>

apps/docs/src/app/platform/component-docs/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" label="Selected State"></fdp-button>
+<fdp-button ariaDisabled="true" label="Disabled State"></fdp-button>
+<fdp-button disabled="true" label="Disabled State"></fdp-button>

apps/docs/src/app/platform/component-docs/platform-button/platform-button-examples/platform-button-truncate-example.component.html

@@ -1 +1 @@
-<fdp-button width="86px" title="Looooooooooong Text Button">Looooooooooong Text Button</fdp-button>
+<fdp-button width="86px" title="Looooooooooong Text Button" label="Looooooooooong Text Button"></fdp-button>

apps/docs/src/app/platform/component-docs/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 label="Standard Button"></fdp-button>
+<fdp-button buttonType="emphasized" label="Standard Button"></fdp-button>
+<fdp-button buttonType="ghost" label="Ghost Button"></fdp-button>
+<fdp-button buttonType="positive" label="Positive Button"></fdp-button>
+<fdp-button buttonType="attention" label="Attention Button"></fdp-button>
+<fdp-button buttonType="negative" label="Negative Button"></fdp-button>
+<fdp-button buttonType="transparent" label="Transparent Button"></fdp-button>

libs/platform/src/lib/components/button/button.component.html

@@ -1,6 +1,6 @@
 <button #fdButton fd-button [attr.id]="id" [attr.title]="title" [attr.name]="name" [attr.aria-label]="title"
-    [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>
+    [glyphPosition]="glyphPosition" [label]="label" [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 }">
 </button>

libs/platform/src/lib/components/button/button.component.ts

@@ -1,23 +1,27 @@
-import { Component, Input, Output, EventEmitter, ElementRef, ChangeDetectorRef, AfterViewInit, HostBinding } from '@angular/core';
+import {
+    Component, Input, Output, EventEmitter, ElementRef,
+    ChangeDetectorRef, AfterViewInit, HostBinding
+} from '@angular/core';
+import { GlyphPosition, ButtonType } from '@fundamental-ngx/core';
 import { BaseComponent } from '../base';
 
-export type ButtonType =
-    | ''
-    | 'standard'
-    | 'positive'
-    | 'negative'
-    | 'attention'
-    | 'ghost'
-    | 'transparent'
-    | 'emphasized'
-    | 'menu';
 @Component({
     selector: 'fdp-button',
     templateUrl: './button.component.html',
     styleUrls: ['./button.component.scss']
 })
 export class ButtonComponent extends BaseComponent implements AfterViewInit {
 
+    /** Position of glyph related to text */
+    @Input()
+    glyphPosition: GlyphPosition = 'before';
+
+    /**
+    * Text rendered inside button component
+    */
+    @Input()
+    label: string;
+
     /** The icon to include in the button. See the icon page for the list of icons.
      * Setter is used to control when css class have to be rebuilded.
      * Default value is set to ''.
@@ -30,7 +34,7 @@ export class ButtonComponent extends BaseComponent implements AfterViewInit {
      'transparent', 'emphasized','menu'.
      *Leave empty for default (standard button).'*/
     @Input()
-    buttonType: ButtonType;
+    buttonType: ButtonType = 'standard';
 
     /** arialabel, tooltip for truncated text
      * for acccesiblity of the element */