From 7bbdb186f6b8455db214f1da44cb12eaff02b1e0 Mon Sep 17 00:00:00 2001 From: raquelarrojo Date: Tue, 22 Feb 2022 14:06:24 +0100 Subject: [PATCH 1/3] Added tag types. --- .../tag-table-properties.component.html | 14 ++-- .../dxc-ngx-cdk/src/lib/dxc-tag/README.md | 8 +-- .../src/lib/dxc-tag/dxc-tag.component.ts | 67 ++++++++++++++++--- 3 files changed, 68 insertions(+), 21 deletions(-) diff --git a/projects/dxc-ngx-cdk-site/src/app/components/examples/tag/properties/tag-table-properties/tag-table-properties.component.html b/projects/dxc-ngx-cdk-site/src/app/components/examples/tag/properties/tag-table-properties/tag-table-properties.component.html index fb8b4b163..e6eb94fa7 100644 --- a/projects/dxc-ngx-cdk-site/src/app/components/examples/tag/properties/tag-table-properties/tag-table-properties.component.html +++ b/projects/dxc-ngx-cdk-site/src/app/components/examples/tag/properties/tag-table-properties/tag-table-properties.component.html @@ -38,11 +38,6 @@ "href". Component will show some visual feedback on hover. - - tabIndexValue: number - 0 - Value of the tabindex. - onClick: EventEmitter @@ -53,7 +48,7 @@ - margin: any (string | object) + margin: string | object Size of the margin to be applied to the component ('xxsmall' | 'xsmall' | @@ -63,7 +58,7 @@ - size: any (string | object) + size: string 'medium' Size of the component ('small' | 'medium' | 'large' | 'fillParent' | @@ -77,4 +72,9 @@ If true, the page is opened in a new browser tab. + + tabIndexValue: number + 0 + Value of the tabindex. + diff --git a/projects/dxc-ngx-cdk/src/lib/dxc-tag/README.md b/projects/dxc-ngx-cdk/src/lib/dxc-tag/README.md index 985aae1ef..9a7e794fa 100644 --- a/projects/dxc-ngx-cdk/src/lib/dxc-tag/README.md +++ b/projects/dxc-ngx-cdk/src/lib/dxc-tag/README.md @@ -54,7 +54,7 @@ The API properties are the following: @Input
iconBgColor: string - 'black' + '#5f249f' Background color of the icon section of the tag. @@ -70,7 +70,7 @@ The API properties are the following: Component will show some visual feedback on hover. - @Input
margin: any (string | object) + @Input
margin: string | object Size of the margin to be applied to the component ('xxsmall' | @@ -80,8 +80,8 @@ The API properties are the following: - @Input
size: any (string | object) - 'medium' + @Input
size: string + 'fitContent' Size of the component ('small' | 'medium' | 'large' | 'fillParent' | 'fitContent'). diff --git a/projects/dxc-ngx-cdk/src/lib/dxc-tag/dxc-tag.component.ts b/projects/dxc-ngx-cdk/src/lib/dxc-tag/dxc-tag.component.ts index ceef7272d..9b3e10b51 100644 --- a/projects/dxc-ngx-cdk/src/lib/dxc-tag/dxc-tag.component.ts +++ b/projects/dxc-ngx-cdk/src/lib/dxc-tag/dxc-tag.component.ts @@ -20,6 +20,21 @@ import { import { ContentChildren, ChangeDetectorRef } from "@angular/core"; import { DxcTagIconComponent } from "./dxc-tag-icon/dxc-tag-icon.component"; +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-tag", templateUrl: "./dxc-tag.component.html", @@ -27,14 +42,35 @@ import { DxcTagIconComponent } from "./dxc-tag-icon/dxc-tag-icon.component"; }) export class DxcTagComponent implements OnInit { isHovered = false; - - @Input() size: string; - @Input() iconSrc: string; - @Input() iconBgColor: string; + /** + * Text to be placed next inside the tag. + */ @Input() label: string; - @Input() labelPosition: string; + /** + * @deprecated URL of the icon. + */ + @Input() iconSrc: string; + /** + * Background color of the icon section of the tag. + */ + @Input() iconBgColor: string = "#5f249f"; + /** + * Whether the label should appear after or before the icon. + */ + @Input() labelPosition: "before" | "after" = "after"; + /** + * If defined, the tag will be displayed as an anchor, using this prop as "href". + * Component will show some visual feedback on hover. + */ @Input() linkHref: string; - @Input() margin: any; + /** + * 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; + /** + * If true, the page is opened in a new browser tab. + */ @Input() get newWindow(): boolean { return this._newWindow; @@ -42,7 +78,14 @@ export class DxcTagComponent implements OnInit { set newWindow(value: boolean) { this._newWindow = coerceBooleanProperty(value); } - private _newWindow; + private _newWindow = false; + /** + * Size of the component. + */ + @Input() size: Size = "fitContent"; + /** + * Value of the tabindex. + */ @Input() get tabIndexValue(): number { return this._tabIndexValue; @@ -50,9 +93,13 @@ export class DxcTagComponent implements OnInit { set tabIndexValue(value: number) { this._tabIndexValue = coerceNumberProperty(value); } - private _tabIndexValue; - - @Output() onClick = new EventEmitter(); + private _tabIndexValue = 0; + /** + * If defined, the tag will be displayed as a button. This function will + * be called when the user clicks the tag. Component will show some + * visual feedback on hover. + */ + @Output() onClick: EventEmitter = new EventEmitter(); isClickDefined = false; shadowDepth: string; From 596259773696771ecbaf450d2ba584b4aee15d3f Mon Sep 17 00:00:00 2001 From: raquelarrojo Date: Tue, 22 Feb 2022 14:07:36 +0100 Subject: [PATCH 2/3] Change default size tag doc. --- .../tag-table-properties/tag-table-properties.component.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/projects/dxc-ngx-cdk-site/src/app/components/examples/tag/properties/tag-table-properties/tag-table-properties.component.html b/projects/dxc-ngx-cdk-site/src/app/components/examples/tag/properties/tag-table-properties/tag-table-properties.component.html index e6eb94fa7..ea020e040 100644 --- a/projects/dxc-ngx-cdk-site/src/app/components/examples/tag/properties/tag-table-properties/tag-table-properties.component.html +++ b/projects/dxc-ngx-cdk-site/src/app/components/examples/tag/properties/tag-table-properties/tag-table-properties.component.html @@ -59,7 +59,7 @@ size: string - 'medium' + 'fitContent' Size of the component ('small' | 'medium' | 'large' | 'fillParent' | 'fitContent'). From 21fc5855d7e111c05db0853c4aeb8c5cd5955417 Mon Sep 17 00:00:00 2001 From: raquelarrojo Date: Thu, 24 Feb 2022 08:51:00 +0100 Subject: [PATCH 3/3] Some fixes tag types --- .../tag-table-properties.component.html | 8 ++++---- .../dxc-ngx-cdk/src/lib/dxc-box/dxc-box.component.ts | 4 ++-- .../dxc-ngx-cdk/src/lib/dxc-tag/dxc-tag.component.ts | 9 ++++----- 3 files changed, 10 insertions(+), 11 deletions(-) diff --git a/projects/dxc-ngx-cdk-site/src/app/components/examples/tag/properties/tag-table-properties/tag-table-properties.component.html b/projects/dxc-ngx-cdk-site/src/app/components/examples/tag/properties/tag-table-properties/tag-table-properties.component.html index ea020e040..51944ac6d 100644 --- a/projects/dxc-ngx-cdk-site/src/app/components/examples/tag/properties/tag-table-properties/tag-table-properties.component.html +++ b/projects/dxc-ngx-cdk-site/src/app/components/examples/tag/properties/tag-table-properties/tag-table-properties.component.html @@ -16,7 +16,7 @@ Text to be placed next inside the tag. - labelPosition: string + labelPosition: 'before' | 'after' 'after' Whether the label should appear after or before the icon. @@ -42,9 +42,9 @@ onClick: EventEmitter - If defined, the tag will be displayed as a button. This function will be - called when the user clicks the tag. Component will show some visual - feedback on hover. + If defined, the tag will be displayed as a button. This event will emit in + case the user clicks the tag. Component will show some visual feedback on + hover. diff --git a/projects/dxc-ngx-cdk/src/lib/dxc-box/dxc-box.component.ts b/projects/dxc-ngx-cdk/src/lib/dxc-box/dxc-box.component.ts index aaaef42ff..e7caf1f43 100644 --- a/projects/dxc-ngx-cdk/src/lib/dxc-box/dxc-box.component.ts +++ b/projects/dxc-ngx-cdk/src/lib/dxc-box/dxc-box.component.ts @@ -10,7 +10,6 @@ import { css } from "emotion"; import { CssUtils } from "../utils"; import { BackgroundProviderService } from "../background-provider/service/background-provider.service"; -type Size = "small" | "medium" | "large" | "fillParent" | "fitContent"; type Space = | "xxsmall" | "xsmall" @@ -60,7 +59,8 @@ export class DxcBoxComponent implements OnInit { /** * Size of the component. */ - @Input() size: Size = "fitContent"; + @Input() size: "small" | "medium" | "large" | "fillParent" | "fitContent" = + "fitContent"; currentBackgroundColor; sizes = { diff --git a/projects/dxc-ngx-cdk/src/lib/dxc-tag/dxc-tag.component.ts b/projects/dxc-ngx-cdk/src/lib/dxc-tag/dxc-tag.component.ts index 9b3e10b51..135a5495c 100644 --- a/projects/dxc-ngx-cdk/src/lib/dxc-tag/dxc-tag.component.ts +++ b/projects/dxc-ngx-cdk/src/lib/dxc-tag/dxc-tag.component.ts @@ -20,7 +20,6 @@ import { import { ContentChildren, ChangeDetectorRef } from "@angular/core"; import { DxcTagIconComponent } from "./dxc-tag-icon/dxc-tag-icon.component"; -type Size = "small" | "medium" | "large" | "fillParent" | "fitContent"; type Space = | "xxsmall" | "xsmall" @@ -82,7 +81,8 @@ export class DxcTagComponent implements OnInit { /** * Size of the component. */ - @Input() size: Size = "fitContent"; + @Input() size: "small" | "medium" | "large" | "fillParent" | "fitContent" = + "fitContent"; /** * Value of the tabindex. */ @@ -95,9 +95,8 @@ export class DxcTagComponent implements OnInit { } private _tabIndexValue = 0; /** - * If defined, the tag will be displayed as a button. This function will - * be called when the user clicks the tag. Component will show some - * visual feedback on hover. + * If defined, the tag will be displayed as a button. This event will emit in case the user clicks the tag. + * Component will show some visual feedback on hover. */ @Output() onClick: EventEmitter = new EventEmitter();