Merge pull request #711 from dxc-technology/rarrojolopez-button-types

Added button types.

Author: Jialecl

projects/dxc-ngx-cdk-site/src/app/components/examples/button/properties/button-table-properties/button-table-properties.component.html

@@ -11,7 +11,7 @@
     <th>Description</th>
   </tr>
   <tr>
-    <td>mode: string ('primary' | 'secondary' | 'text')</td>
+    <td>mode: 'primary' | 'secondary' | 'text'</td>
     <td>
       <code>'primary'</code>
     </td>
@@ -20,7 +20,7 @@
   <tr>
     <td>label: string</td>
     <td></td>
-    <td>Text to be placed next to the button.</td>
+    <td>Text to be placed inside the button.</td>
   </tr>
   <tr>
     <td>iconSrc: string</td>
@@ -31,7 +31,7 @@
     </td>
   </tr>
   <tr>
-    <td>iconPosition: string ('before' | 'after')</td>
+    <td>iconPosition: 'before' | 'after'</td>
     <td>
       <code>'before'</code>
     </td>
@@ -44,11 +44,6 @@
     </td>
     <td>If true, the component will be disabled.</td>
   </tr>
-  <tr>
-    <td>tabIndexValue: number</td>
-    <td><code>0</code></td>
-    <td>Value of the tabindex.</td>
-  </tr>
   <tr>
     <td>onClick: EventEmitter</td>
     <td></td>
@@ -58,7 +53,7 @@
     </td>
   </tr>
   <tr>
-    <td>margin: any (string | object)</td>
+    <td>margin: string | object</td>
     <td></td>
     <td>
       Size of the margin to be applied to the component ('xxsmall' | 'xsmall' |
@@ -68,11 +63,16 @@
     </td>
   </tr>
   <tr>
-    <td>size: any (string | object)</td>
-    <td></td>
+    <td>size: string</td>
+    <td><code>'fitContent'</code></td>
     <td>
       Size of the component ('small' | 'medium' | 'large' | 'fillParent' |
       'fitContent').
     </td>
   </tr>
+  <tr>
+    <td>tabIndexValue: number</td>
+    <td><code>0</code></td>
+    <td>Value of the tabindex.</td>
+  </tr>
 </dxc-table>

projects/dxc-ngx-cdk/src/lib/dxc-button/README.md

@@ -42,7 +42,7 @@ The API properties are the following:
       <th>Description</th>
     </tr>
     <tr>
-      <td>@Input<br>mode: string ('primary' | 'secondary' | 'text')</td>
+      <td>@Input<br>'primary' | 'secondary' | 'text'</td>
       <td>
         <code>'primary'</code>
       </td>
@@ -51,15 +51,15 @@ The API properties are the following:
     <tr>
       <td>@Input<br>label: string</td>
       <td></td>
-      <td>Text to be placed next to the button.</td>
+      <td>Text to be placed inside the button.</td>
     </tr>
     <tr>
       <td>@Input<br>iconSrc: string</td>
       <td></td>
       <td>URL of the icon that will be placed next to the button label.</td>
     </tr>
     <tr>
-      <td>@Input<br>iconPosition: string ('before' | 'after')</td>
+      <td>@Input<br>iconPosition: 'before' | 'after'</td>
       <td>
         <code>'before'</code>
       </td>
@@ -81,7 +81,7 @@ The API properties are the following:
       </td>
     </tr>
     <tr>
-      <td>@Input<br>margin: any (string | object)</td>
+      <td>@Input<br>margin: string | object</td>
       <td></td>
       <td>
         Size of the margin to be applied to the component ('xxsmall' |
@@ -91,7 +91,7 @@ The API properties are the following:
       </td>
     </tr>
     <tr>
-      <td>@Input<br>size: any (string | object)</td>
+      <td>@Input<br>size: string | object</td>
       <td></td>
       <td>
         Size of the component ('small' | 'medium' | 'large' | 'fillParent' |

projects/dxc-ngx-cdk/src/lib/dxc-button/dxc-button.component.ts

@@ -20,36 +20,80 @@ import {
 import { DxcButtonIconComponent } from "./dxc-button-icon/dxc-button-icon.component";
 import { BackgroundProviderService } from "../background-provider/service/background-provider.service";
 
+type Size = "small" | "medium" | "large" | "fillParent" | "fitContent";
+type Space =
+  | "xxsmall"
+  | "xsmall"
+  | "small"
+  | "medium"
+  | "large"
+  | "xlarge"
+  | "xxlarge";
+type Margin = {
+  top?: Space;
+  bottom?: Space;
+  left?: Space;
+  right?: Space;
+};
+
 @Component({
   selector: "dxc-button",
   templateUrl: "./dxc-button.component.html",
   providers: [CssUtils],
 })
 export class DxcButtonComponent {
-  @Input() mode: string;
+  /**
+   * Uses one of the available button modes.
+   */
+  @Input() mode: "primary" | "secondary" | "text" = "primary";
+  /**
+   * If true, the component will be disabled.
+   */
   @Input()
   get disabled(): boolean {
     return this._disabled;
   }
   set disabled(value: boolean) {
     this._disabled = coerceBooleanProperty(value);
   }
-  private _disabled;
+  private _disabled = false;
+  /**
+   * Text to be placed inside the button.
+   */
   @Input() label: string;
+  /**
+   * @deprecated URL of the icon that will be placed next to the button label.
+   */
   @Input() iconSrc: string;
-  @Input() iconPosition: string;
-  @Input() margin: any;
-  @Input() size: string;
+  /**
+   * Whether the icon should appear after or before the label.
+   */
+  @Input() iconPosition: "before" | "after" = "before";
+  /**
+   * Size of the margin to be applied to the component ('xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge').
+   * You can pass an object with 'top', 'bottom', 'left' and 'right' properties in order to specify different margin sizes.
+   */
+  @Input() margin: Space | Margin;
+  /**
+   * Size of the component.
+   */
+  @Input() size: Size = "fitContent";
+  /**
+   * Value of the tabindex attribute.
+   */
   @Input()
   get tabIndexValue(): number {
     return this._tabIndexValue;
   }
   set tabIndexValue(value: number) {
     this._tabIndexValue = coerceNumberProperty(value);
   }
-  private _tabIndexValue;
+  private _tabIndexValue = 0;
 
-  @Output() onClick = new EventEmitter<any>();
+  /**
+   * This function will be called when the user clicks the button.
+   */
+  @Output() onClick: EventEmitter<void> = new EventEmitter<void>();
 
   @HostBinding("class") className;