From 15d58334e86cb93847444f4444b918721a74bc14 Mon Sep 17 00:00:00 2001 From: Jialecl Date: Wed, 6 Apr 2022 11:48:33 +0200 Subject: [PATCH 1/2] adding type file to button component --- .../lib/dxc-button/dxc-button.component.ts | 24 +++----------- .../src/lib/dxc-button/dxc-button.types.ts | 31 +++++++++++++++++++ 2 files changed, 36 insertions(+), 19 deletions(-) create mode 100644 projects/dxc-ngx-cdk/src/lib/dxc-button/dxc-button.types.ts diff --git a/projects/dxc-ngx-cdk/src/lib/dxc-button/dxc-button.component.ts b/projects/dxc-ngx-cdk/src/lib/dxc-button/dxc-button.component.ts index f3ae9ca69..f05076b83 100644 --- a/projects/dxc-ngx-cdk/src/lib/dxc-button/dxc-button.component.ts +++ b/projects/dxc-ngx-cdk/src/lib/dxc-button/dxc-button.component.ts @@ -19,22 +19,7 @@ import { } from "@angular/cdk/coercion"; 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; -}; +import { Size, Space, Spacing, Mode, ButtonProperties } from "./dxc-button.types"; @Component({ selector: "dxc-button", @@ -45,7 +30,7 @@ export class DxcButtonComponent { /** * Uses one of the available button modes. */ - @Input() mode: "primary" | "secondary" | "text" = "primary"; + @Input() mode: Mode = "primary"; /** * If true, the component will be disabled. */ @@ -73,7 +58,7 @@ export class DxcButtonComponent { * 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; + @Input() margin: Space | Spacing; /** * Size of the component. */ @@ -107,7 +92,7 @@ export class DxcButtonComponent { lightBackground: boolean = true; darkBackground: boolean = false; - defaultInputs = new BehaviorSubject({ + defaultInputs = new BehaviorSubject({ mode: "primary", disabled: false, label: null, @@ -116,6 +101,7 @@ export class DxcButtonComponent { margin: null, size: "fitContent", tabIndexValue: 0, + type: "button" }); constructor( diff --git a/projects/dxc-ngx-cdk/src/lib/dxc-button/dxc-button.types.ts b/projects/dxc-ngx-cdk/src/lib/dxc-button/dxc-button.types.ts new file mode 100644 index 000000000..4ac498d60 --- /dev/null +++ b/projects/dxc-ngx-cdk/src/lib/dxc-button/dxc-button.types.ts @@ -0,0 +1,31 @@ +export type Size = "small" | "medium" | "large" | "fillParent" | "fitContent"; + +export type Mode = "primary" | "secondary" | "text"; + +export type Space = + | "xxsmall" + | "xsmall" + | "small" + | "medium" + | "large" + | "xlarge" + | "xxlarge"; + +export type Spacing = { + top?: Space; + bottom?: Space; + left?: Space; + right?: Space; +}; + +export interface ButtonProperties { + mode: Mode; + label: string; + disabled: boolean; + iconSrc: string; + iconPosition: "before" | "after"; + margin: Space | Spacing; + size: Size; + type: "reset" | "submit" | "button"; + tabIndexValue: number; +} \ No newline at end of file From c0add2ee779e5e392e91dd28ac4a0d982d0b00f9 Mon Sep 17 00:00:00 2001 From: Jialecl Date: Thu, 7 Apr 2022 09:45:47 +0200 Subject: [PATCH 2/2] Removing type size --- .../src/lib/dxc-button/dxc-button.component.ts | 6 +++--- .../dxc-ngx-cdk/src/lib/dxc-button/dxc-button.types.ts | 8 ++------ 2 files changed, 5 insertions(+), 9 deletions(-) diff --git a/projects/dxc-ngx-cdk/src/lib/dxc-button/dxc-button.component.ts b/projects/dxc-ngx-cdk/src/lib/dxc-button/dxc-button.component.ts index f05076b83..80e283881 100644 --- a/projects/dxc-ngx-cdk/src/lib/dxc-button/dxc-button.component.ts +++ b/projects/dxc-ngx-cdk/src/lib/dxc-button/dxc-button.component.ts @@ -19,7 +19,7 @@ import { } from "@angular/cdk/coercion"; import { DxcButtonIconComponent } from "./dxc-button-icon/dxc-button-icon.component"; import { BackgroundProviderService } from "../background-provider/service/background-provider.service"; -import { Size, Space, Spacing, Mode, ButtonProperties } from "./dxc-button.types"; +import { Space, Spacing, ButtonProperties } from "./dxc-button.types"; @Component({ selector: "dxc-button", @@ -30,7 +30,7 @@ export class DxcButtonComponent { /** * Uses one of the available button modes. */ - @Input() mode: Mode = "primary"; + @Input() mode: "primary" | "secondary" | "text" = "primary"; /** * If true, the component will be disabled. */ @@ -62,7 +62,7 @@ export class DxcButtonComponent { /** * Size of the component. */ - @Input() size: Size = "fitContent"; + @Input() size: "small" | "medium" | "large" | "fillParent" | "fitContent" = "fitContent"; /** * This prop corresponds to the 'type' prop of the button in html. */ diff --git a/projects/dxc-ngx-cdk/src/lib/dxc-button/dxc-button.types.ts b/projects/dxc-ngx-cdk/src/lib/dxc-button/dxc-button.types.ts index 4ac498d60..74ff2e6b3 100644 --- a/projects/dxc-ngx-cdk/src/lib/dxc-button/dxc-button.types.ts +++ b/projects/dxc-ngx-cdk/src/lib/dxc-button/dxc-button.types.ts @@ -1,7 +1,3 @@ -export type Size = "small" | "medium" | "large" | "fillParent" | "fitContent"; - -export type Mode = "primary" | "secondary" | "text"; - export type Space = | "xxsmall" | "xsmall" @@ -19,13 +15,13 @@ export type Spacing = { }; export interface ButtonProperties { - mode: Mode; + mode: "primary" | "secondary" | "text"; label: string; disabled: boolean; iconSrc: string; iconPosition: "before" | "after"; margin: Space | Spacing; - size: Size; + size: "small" | "medium" | "large" | "fillParent" | "fitContent"; type: "reset" | "submit" | "button"; tabIndexValue: number; } \ No newline at end of file